CP-01_Grupo-07_Memoria.tex

\documentclass[a4paper,11pt]{article}
\usepackage[utf8]{inputenc}
\usepackage[spanish]{babel} %Idioma español
\usepackage[margin=30mm]{geometry} %Margenes mas pequeños
\usepackage{hyperref} %Enlaces en la documentacion
\usepackage{graphicx} %Usar imagenes
\graphicspath{{./media/}}

%opening
\title{
        \textbf{Usabilidad de las interfaces de usuario}\large\\
        \textbf{Caso práctico 1}\\
        \medskip
        Universidad de Sevilla - Ingeniería Informática Tecnologías Informáticas\\
        Interacción Persona Ordenador - Cuarto curso}
\author{Juan Arteaga Carmona (juaartcar - juan.arteaga41567@gmail.com)\\
        Juan Rodriguez Valencia (juarodval - resperodriguez@outlook.com)\\
        Antonio Jesús Santiago Muñoz (antsanmun1 - ajsantiagom10@gmail.com)\\
}

\begin{document}

\maketitle

%Índices
\newpage
\tableofcontents
\listoffigures
\newpage

\section{Introducción}
\subsection{Motivación}
La elaboración de esta memoria nace de la necesidad de documentar el caso práctico número uno de la asignatura 'Interacción persona ordenador' de la titulacion de Ingeniería Informática - Tecnologías Informáticas de la Universidad de Sevilla
\subsection{Usabilidad}
Se define como usabilidad la capacidad del producto software para ser entendido, aprendido, usado y resultar atractivo para el usuario, cuando se usa bajo determinadas condiciones. \cite{diapTema1} \cite{iso25010}\\
Asi pues, teniendo en cuenta esta definición procederemos a analizar la usabilidad de las interfaces de usuario de un aparato físico, en este caso un microondas, y de un software, la web del grupo de supermercados Simply.


\section{Informe de la usabilidad de un aparato físico}
\subsection{Descripción de la interfaz de usuario de un microondas}
En este apartado nos encontramos con el microondas Daewoo KOG-6F2B el cual tiene ciertos problemas de usabilidad que comentaremos a continuación.\\
Antes, veremos detalladamente la interfaz para entender lo que hace.
En la figura \ref{fig:micmanual} podemos ver un extracto del manual. \cite{manualmic}\\
A continuación explicaremos el funcionamiento de los botones.


\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.6]{microondasmanual.png}
 \caption{Extracto del manual del microondas}
 \label{fig:micmanual}
\end{figure}


\begin{enumerate}
  \item Pantalla digital en la que se muestran números.
  \item Botón AutoCook para seleccionar un menú de forma secuencial.
  \item Botón Reheat para recalentar platos. Se selecciona una opción de forma secuencial.
  \item Boton defrost para descongelar alimentos. Se selecciona una opción de forma secuencial.
  \item Igual que el botón defrost pero de forma más rapida.
  \item Enciende el microondas.
  \item Inicia la limpieza automática mediante el vapor de agua de un vaso.
  \item Botón calientaplatos.
  \item Activa la funcion grill.
  \item Activa la funcion Combi
  \item Selectores de tiempo y peso.
  \item Para el microondas.
  \item Inicia el microondas.
\end{enumerate}




\subsection{Planteamiento del problema}
\subsubsection{Problema 1: Diferenciación poco clara de etiquetas y botones.}

El primer problema ante el que nos encontramos es en que no tenemos claro qué es un botón y qué no, el ser los botones táctiles no ayuda a la tarea, además que en un entorno de cocina, esta decisión puede dificultar la tarea al no llevarse bien los dedos mojados con los paneles táctiles. Como ya hemos mencionado no queda nada claro donde pulsar ni qué son los botones, dificultando a primera vista la tarea de usar el aparato. Un ejemplo de este problema lo podemos ver en la figura \ref{fig:miccontrol}

\begin{figure}[h!]
 \centering
 \includegraphics[scale=1]{microondasampliado.png}
 \caption{Ampliación de los controles del microondas}
 \label{fig:miccontrol}
\end{figure}

\subsubsection{Problema 2: Colocación incorrecta de botones importantes.}
El siguiente problema que vemos es que botones importantes que deberían estar diferenciados, como el botón Power, están en medio del panel confundido con los demás, llevando a confusión y a pulsarlo sin querer en un momento dado.

\subsection{Soluciones propuestas}
\subsubsection{Solución al problema 1}
Una solución sencilla al problema numero uno es la de utilizar botones comunes que no se confundan con sus etiquetas. Para ello deberiamos de prescindir del aspecto minimalista y utilizar un aspecto mucho mas centrado en la usabilidad. Intentar sacar al mercado un producto que tenga la ultima tecnología esta bien, pero no deberia ser un producto que no se pueda usar teniendo las manos mojadas, algo común en una cocina.
Un uso del color mas interesante tambien ayudaría a distinguir entre etiquetas y botones, actualmente todo es blanco. Para mejorar este diseño se podrian utilizar colores que se diferencien bien, lo que nos aseguraría mejorar la memoria sensorial \cite{diapTema1} del aparato y a distinguir mejor los botones.

\subsubsection{Solución al problema 2}
La solución más sencilla sería redistribuir los botones, destacando los importantes y colocandolos por ejemplo en la esquina superior, justo debajo o incluso al lado del panel de los minutos, de esta forma destacan y se evita pulsarlos de forma equivocada.


\subsubsection{Aspectos positivos del diseño inicial}
Un aspecto a destacar en el diseño inicial, es el uso de palabras para indicar la función que realiza cada modo de funcionamiento del microondas, ya que es mucho más explicativo que lo símbolos que se usan en otros aparatos que intentan explicar cada función pero que dependiendo de cada región o persona crea confusión cuando tienen que interpretarlo. También cabría destacar el uso de un display digital para ver el tiempo que seleccionamos y el que resta hasta que acabe su función, en vez de el temporizador con rueda convencional, ya que esto aclara de forma más intuitiva el tiempo que queda o seleccionamos.

\subsubsection{Propuesta adicional}
Una pequeña mejora a proponer sobre el diseño inicial del panel de control del microondas sería la utilización de colores para diferenciar los distintos modos de funcionamiento asociando colores que estén directamente relacionados con esos modos como por ejemplo colores cálidos para los modos de calentar mas extremos y colores fríos a los modos defrost, ya que ayudaría, por la capacidad de asociación de colores de los usuarios, a aclarar un poco la mala distribución de los modos por el panel. Otra mejora sería sustituir los botones con valores fijos en el tiempo, por botones con un signo de + y otro de – para regular el tiempo de una forma más convencional, esto ayudaría al usuario a no tener que salir del modelo estándar y hace que la tarea sea mas cotidiana.


\section{Informe de la usabilidad de una aplicación informática}
Para esta sección hemos decidido utilizar la web del grupo Simply Supermercados \cite{webSimply} para demostrar los problemas que tiene.\\
Con tan solo ver la imagen de la figura \ref{fig:pagprin} se pueden apreciar bastantes problemas. Asi pues, pasamos a plantearlo de uno en uno.

\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.5]{webPrincipal.png}
 \caption{Página principal del grupo Simply}
 \label{fig:pagprin}
\end{figure}

\subsection{Descripción de la interfaz de usuario de la web del grupo Simply Supermecados}
Al abrir la web del grupo Simply nos encontramos con una pagina web bastante simple que se basa practicamente en el uso de imágenes. Como veremos más adelante, este uso de imagenes excesivo se convierte en uno de los problemas mas latentes de la web.
Asi mismo, encontramos una gran cantidad de estas imágenes que hacen que la experiencia de usuario no sea satisfactoria. Nos encontramos con una pagina principal que nos pone 26 imagenes la pantalla al mismo tiempo. Asi mismo tambien veremos imágenes que aparentan ser botones y que no lo son, el caso contrario, imagenes que no parecen ser nisiquiera imagenes que funcionan como botones y, hablando de botones, nos encontraremos con botones que no tienen clara su función o que se encuentran mal ubicados.


\subsection{Planteamiento del problema}
\subsubsection{Problema 1: Demasiada información en pantalla y poco estrucurada}
En la página de inicio hay información de diferentes servicios que ofrecen, pero están ordenadas de forma caótica, ya que servicios que están relacionados, están puestos en sitios poco cercano entre ellos. Además el tamaño de la información, de servicios más importantes, están puestos en un tamaño mucho menor que servicios que no son tan importantes. Todos estos servicios son imágenes, y que en ocasiones estas se solapan,  funcionan como botones pero no queda tan claro para el usuario que tengan esa función. Ampliaremos información sobre esto en el siguiente sección.

\subsubsection{Problema 2: Imágenes que funcionan como botón pero no lo aparentan}
En esta sección hablaremos de los numerosos botones que aparecen por la web de una forma muy poco convencional.
En la página principal tenemos los primeros ejemplos de este comportamiento. El banner situado a a derecha del nombre de la empresa esta elaborado por 6 imágenes distintas, y ninguna de ellas indica claramente de forma visual que se trata de un botón que lleva a un sitio distinto llevando incluso a hacer creer que se trata de publicidad. Este banner se puede ver en la figura \ref{fig:bannerarriba}.\\
También nos encontramos con una parte de la web que esta completamente compuesta de 2 grandes botones que podrian haber sido reemplazados por una imagen principal y una sección de texto.
Esto se puede ver en la figura \ref{fig:pagcomplbot}



\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.5]{bannerarriba.png}
 \caption{Banner de la parte superior de la web}
 \label{fig:bannerarriba}
\end{figure}

\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.5]{botoncamuflado.png}
 \caption{Botones gigantescos que ocupan toda la página}
 \label{fig:pagcomplbot}
\end{figure}

\subsubsection{Problema 3: Imágenes que aparentan ser un botón y no funcionan como tal}
Igual que hemos observado imagenes que se comportan como botones sin una indicación visual tambien podemos encontrarnos con todo lo contrario, imágenes que parecen ser botones pero que sin embargo no funcionan como tales. Un claro ejemplo de este comportamiento es el que no encontramos en la parte de socios. Como podemos ver en la figura \ref{fig:botonnoboton}

\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.4]{botonquenoesboton.png}
 \caption{Claro ejemplo de un diseño que lleva a la confusión.}
 \label{fig:botonnoboton}
\end{figure}


\subsubsection{Problema 4: Botones mal ubicados y desestructurados}
En la página principal aparece un formulario para que introduzcas tu correo electrónico para suscribirse a su newleter, pero el botón que sirve para confirmarlo esta bajo la imagen que hay junto a este. Figura \ref{fig:bannerysubs}.
También encontramos en la página principal cinco botones que pertenecen al número de baner, pero estos no son intuitivos a la hora de saber que baner está apareciendo en pantalla. En la página de “Atención al cliente” después de tener que rellenar todo el formulario aparece el botón de enviar pero si pinchamos sobre él aparecerá el error de que debemos aceptar las condiciones y términos. Para aceptar las condiciones y términos tenemos que marcar un check que podemos encontrar debajo de un texto con las condiciones y en pequeño justo debajo del botón enviar, por lo que es poco intuitivo para el usuario saber que tiene que marcar eso antes de dar al botón enviar para que no lo de ningún tipo de error. Figura \ref{fig:formulariocondiciones}.
En la parte de “Alta cliente” nos encontramos con un formulario mal estructurado y con las casillas desordenadas, lo que implica que para el usuario sea poco intuitivo rellenar este formulario. También en esta misma página encontramos un botón de imprimir que no deja nada claro para que sirve ni se le ve ningún sentido. Figura \ref{fig:imprimiryformulario}.


\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.5]{bannerysubs.png}
 \caption{Boton de subscripcion y cambio del banner}
 \label{fig:bannerysubs}
\end{figure}

\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.5]{formulariocondiciones.png}
 \caption{El boton de aceptar las condiciones se encuentra debajo del de enviar}
 \label{fig:formulariocondiciones}
\end{figure}

\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.5]{imprimiryformulario.png}
 \caption{El formulario no se visualiza correctamente y aparece un boton de imprimir sin sentido.}
 \label{fig:imprimiryformulario}
\end{figure}



\subsubsection{Problema 5: Menús poco intuitivos}
En esta web nos encontramos que utiliza menús, que una vez los desplegamos o seleccionamos cada categoría, nos aparece dentro de esta un segundo menú con mas categorías y a su vez alguna de estas categoría tiene a su vez mas subcategorias, tal y como lo podemos ver en la figura \ref{fig:subsubmenu}

\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.5]{subsubmenu.png}
 \caption{Nos encontramos con una subseccion dentro de un submenu dentro de un menu}
 \label{fig:subsubmenu}
\end{figure}



\subsection{Soluciones propuestas}
La mayoria de los problemas enumerados anteriormente se pueden resolver de una forma sencilla tal y como expondremos a continuación.

\subsubsection{Solución al problema 1}
El primer problema se da en practicamente todas las subpaginas de la web pero nos centraremos en la página principal para poder dar una solución.\\
Lo primero que habria que hacer es organizar la página. Actualmente nos encontramos con una amalgama de imagenes que no parecen tener ningun orden.
Un primer cambio seria eliminar la imagenes a la derecha del nombre del grupo, ya que como comentamos anteriormente parecen fuera de lugar.
A continuación deberiamos de cambiar el banner por un carousel grande que aparezca al principio de la web. Cualquier framework nos ayudaria bastante para crear un carousel de este tipo, un ejemplo seria el de bootstrap \cite{bootstrapcarr}.\\
Para la parte de abajo de la web, podriamos solucionar si reducimos el numero de imagenes y creamos un menú en el que podamos seleccionar lo que queramos sin tener que ver las 8 imágenes al mismo timepo. Además, algunas de estas secciones estan duplicadas, como es el caso de las gasolineras, que tienen un enlace en la parte superior y en la parte inferior.\\
De esta forma acabariamos con una web mucho más simple y usable.



\subsubsection{Solución al problema 2}
Para solucionar este problema nos encontramos con una solucion muy sencilla.\\
Como vemos en la figura \ref{fig:pagcomplbot}, la página completa se compone de dos grandes imágenes que se comportan como dos botones gigantescos.\\
Lo mas razonable seria prescindir de los botones. La web que vemos en la figura puede crearse facilmente con un banner en la parte superior sin necesidad de que este sea un gran botón. Asi mismo la segunda parte de la web es, al igual que en la primera parte, facilmente mejorable si se presciende completamente del botón. Al fin y al cabo se trata de una imagen meramente informativa que se puede sustituir facilmente con un poco de HTML y CSS.\\
Para sustituir el uso de esos hipervinculos dentro de la imagen, se puede utilizar botones de un tamaño mas reducido y que se fijen a reglas conocidas de diseño como, por ejemplo, Material Desing de Google. \cite{matdesing}.

\subsubsection{Solución al problema 3}
Solucionar este problema es muy sencillo. Lo único que habria que hacer es que esas imágenes funcionen realmente como un botón. En otras partes de la web ya se ha visto como se utiliza este comportamiento en, practicamente, el mismo estilo de boton (Figura \ref{fig:siesunboton}). Así pues, la solución razonable sería implementar este mismo tipo de botón.

\begin{figure}[h!]
 \centering
 \includegraphics[scale=0.4]{siesunboton.png}
 \caption{Ejemplo de botón bien definido}
 \label{fig:siesunboton}
\end{figure}

\subsubsection{Solución al problema 4}
Respecto al problema 4, la mala ubicacion de los botones que nos encontramos, se puede solucionar realizando cambios en el CSS de la web. Asi mismo, ya que se estaría modificando el CSS, se podrian utilizar un estilo similar al del resto de botones de la web, siguiendo la imagen corporativa. Actualmente se estan utilizando los botones por defecto que renderiza el navegador.\\
Respecto al cuadro de aceptar los terminos y condiciones del formulario, la solución seria ponerlo encima del botón de enviar.

\subsubsection{Solución al problema 5}
Para solucionar el problema de menus poco intuitivos, se puede utilizar una solución que se usa en otra partes de la web, menús desplegables.
Como vemos en la figura \ref{fig:subsubmenu} este tipo de menús ya se utilizan en la web y se podrian applicar a todos los menús. De esta forma podriamos ver todos los submenus con tan solo pasar el raton por encima del primer menú. Asi mismo, cabe destacar que la página de atención al cliente no posee ningun menú aparte por lo que se pierde la consistencia del menú superior. Una solución a este problema seria crear submenus con lo que antes eran botones a página completa que redirigian a otros sitios.


\subsubsection{Aspectos positivos del diseño inicial}
Dentro de los pocos aspectos positivos de que podemos destacar de esta web se encuentra el uso de los colores. La imagen corporativa utiliza mucho el color rojo, lo que hace que parte de la web se encuentre en este mismo color. Sin embargo tambien nos encontramos con partes en colores como el verde, que contrata bastante bien con el rojo sin llegar a ser incómodo para la vista.\\
Tambien se puede destacar la rapidez de la web. Inspeccionando el codigo fuente podemos ver como se trata de una web muy sencilla, que apenas usa javascript. Si bien es cierto que en conexiones excesivamente lentas es posible que las imagenes (las cuales componen toda la web, como comentamos anteriormente) tarden un poco en cargar, ninguna conexión media de hoy día debería de tener problemas con ellas.\\
Un último aspecto positivo a resaltar, aunque no tiene nada que ver con la interfaz de usuario, es que la web posee certificado digital, lo que, viendo el lamentable estado de las demás partes de la web, sorprende.


\subsubsection{Propuesta adicional}
Como propuesta adicional creemos que la empresa deberia plantearse seriamente crear una web desde cero, ya que la web que actualmente tienen es un claro ejemplo de que no todo el mundo deberia crear páginas web. El uso de imagenes repartidas por toda la web para cualquier cosa que se podría realizar con texto es claramente una mala decisión que le quita profesionalidad a la empresa.\\
Cualquier persona con un mínimo conocimiento de creación de paginas web puede hacer una web mucho mejor que la actual.


\begin{thebibliography}{99}
\bibitem{diapTema1}
  José mariano González Romano y Víctor Díaz Madrigal,
  \textit{Introducción a la IPO},
  \href{https://s3-eu-central-1.amazonaws.com/learn-eu-central-1-prod-fleet01-xythos/5ac734ed505df/1497177?response-content-disposition=inline%3B%20filename%2A%3DUTF-8%27%27IPO-2018-19-01-Introducci%25C3%25B3n%2520a%2520la%2520IPO.pdf&response-content-type=application%2Fpdf&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20181009T201303Z&X-Amz-SignedHeaders=host&X-Amz-Expires=21600&X-Amz-Credential=AKIAIZ3QX2YUHH4EOO3A%2F20181009%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Signature=91e59768c9f86b77180953691bdcae19f7300073d4ad74d0949de1515d0b6f55}{Diapositivas de clase. Tema 1}.

\bibitem{iso25010}
ISO,
\textit{ISO 25010},
\href{https://iso25000.com/index.php/normas-iso-25000/iso-25010/23-usabilidad}{Página Web}.

\bibitem{manualmic}
Daewoo Electronics,
\textit{Manual de Usuario},
\href{http://www.daewooelectronics.co.uk/media/manual/KOG-6F2B_Manual.pdf}{Manual Online}.

\bibitem{webSimply}
Grupo Simply Supermercados,
\textit{Página web de la empresa},
\href{www.simply.es}{Página Web}.

\bibitem{matdesing}
Guia de estilo de los botones en material desing,
\textit{Buttons - Material Desing},
\href{https://material.io/design/components/buttons.html}{Página Web}.

\bibitem{bootstrapcarr}
W3Schools,
\textit{Bootstrap Carousel},
\href{https://www.w3schools.com/bootstrap/bootstrap_carousel.asp}{Página Web}.

\end{thebibliography}



\end{document}