-
Notifications
You must be signed in to change notification settings - Fork 0
/
CP-02_Grupo-07_Memoria.tex
317 lines (246 loc) · 19.1 KB
/
CP-02_Grupo-07_Memoria.tex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
\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/}}
\usepackage{float} %[H] de las figuras
\usepackage[nottoc,numbib]{tocbibind} %Referencias aparece en el indice
\usepackage{pdflscape} %Pagina horizontal
\usepackage{pdfpages} %Insertar pdf
%opening
\title{
\textbf{Ingeniería de la interfaz}\large\\
\textbf{Caso práctico 2}\\
\medskip
Universidad de Sevilla - Ingeniería Informática Tecnologías Informáticas\\
Interacción Persona Ordenador - Cuarto curso}
\author{Juan Arteaga Carmona (juaartcar - [email protected])\\
Juan Rodriguez Valencia (juarodval - [email protected])\\
Antonio Jesús Santiago Muñoz (antsanmun1 - [email protected])\\
}
\begin{document}
\maketitle
%Índices
\newpage
\tableofcontents
\listoffigures
\newpage
\section{Introducción}
\subsection{Motivación}
La creación de este documento nace de la necesidad de documentar el segundo caso práctico de la asignatura de ``Interacción Persona Ordenador'' del grado de Ingeniería Informática - Tecnologías Informáticas de la Universidad de Sevilla.
\subsection{Descripción de la tarea}
Hemos decidido crear el prototipo de la interfaz gráfica de usuario de una aplicación móvil que sirva para realizar la renovación del DNI/NIE/Pasaporte. Debido a que actualmente los smartphones han adquirido mucha importancia en nuestro día a día siendo la primera opción a la hora de realizar trámites cotidianos a través de internet, creemos que es una oportunidad interesante. Los Sistemas Operativos utilizados serán tanto iOS como Android, pero el prototipo será desarrollado y presentado en la plataforma Android.\\
\subsection{Dispositivo y público objetivo}
La tarea que se va a realizar a través de una interfaz gráfica de usuario es la solicitud de una cita previa para la renovación del documento nacional de indentidad (DNI, NIE, Pasaporte).\\
El sistema de cita previa que hay actualmente solo opera a través de una aplicación web\cite{webcitaDNI} y queremos hacer una aplicación para que los usuarios que tengan dispositivos android puedan tener disponible ese servicio a través de sus terminales sin tener que utilizar la web del Ministerio.\\
Nuestro público objetivo son, por lo general, personas adultas acostumbradas a usar aplicaciones móviles, ya que la tarea de pedir cita para la renovación del DNI no es una tarea enfocada a niños y queda fuera del alcance de la mayoría de personas mayores al no entenderse éstas con los smartphones, generalmente. Nuestro enfoque de la App es que sea sencilla con los pasos claros y bien definidos para que aunque el usuario no esté dentro de nuestro público objetivo no tenga ningún problema a la hora de utilizarla.
\subsection{Paradigma de Interacción}
Debido al crecimiento del uso de dispositivos móviles (los nuevos ordenadores personales), creemos que es conveniente la creación y el uso de aplicaciones para estos. A si pues, hemos decidido llevar este servicio a este tipo de implementación para estos dispositivos para que la tarea a realizar sea sencilla y fácil de gestionar con los medios que estos dispositivos nos ofrecen.\\
Esto sería, lo que en la literatura \cite{gonzalez2016paradigmas}, se conoce como el paradigma de interacción del ordenador de sobremesa, a pesar de que este nombre no sea adecuado, ya que se da a entender que sería una aplicación para un PC y no para un dispositivo smartphone.
\subsection{Tipos de cita}
Los usuarios de esta aplicación pueden estar interesados en solicitar diferentes tipos de cita. En concreto hemos decidido clasificar claramente el tipo de cita a pedir, son las siguientes:
\begin{itemize}
\item Cita para renovar DNI: este tipo de cita te permite acudir a la comisaría que elijas y renovar el DNI.
\item Cita para renovar Pasaporte: este tipo de cita te permite acudir a la comisaría que elijas y renovar el pasaporte.
\item Cita para renovar el NIE: este tipo de cita te permite acudir a la comisaría que elijas y renovar el NIE.
\item Cita para renovar ambos (DNI y Pasaporte): este tipo de cita te permite acudir a la comisaría que elijas y renovar tanto el DNI y pasaporte.
\end{itemize}
\section{Prototipo de interfaz}
A continuación vamos a definir cada una de las pantallas de la aplicación. En primer lugar hemos desarrollado unos bocetos rápidos para definir la aplicación, los cuales se pueden observar en el anexo \ref{bocetos}. Posteriormente hemos empleado la técnica de “Prototipos de papel” ya que muchos profesionales de la usabilidad coinciden en afirmar que, aunque el prototipado en papel parece un método simple, puede proporcionar una gran cantidad de retroalimentación muy útil que resultará en el diseño de mejores productos\cite{carolyn2003retroalimentacion}.\\
Para la elaboración de estos prototipos de papel no hemos utilizado una herramienta de prototipado, obtando por realizar un prototipo básico en Android Studio\cite{androidstudio}, el IDE oficial de Google para realizar aplicaciones Android.\\
De esta forma podemos crear un prototipo en papel que, con apenas un poco mas de tiempo, podriamos hacer funcionar facilmente en un dispositivo Android. De esta forma podriamos entender mucho mejor como los usuarios interaccionaran con la aplicación.\\
\subsection{Pantalla principal}
En esta pantalla (figura \ref{fig:pantallainicial}) nos encontramos ante la explicación de cómo proceder y un dos botones, uno que nos permite iniciar el trámite de petición de cita y otro que nos permite anular las citas que tengamos.
\begin{figure}[H]
\centering
\includegraphics[scale=0.2]{1.png}
\caption{Pantalla principal de la aplicación}
\label{fig:pantallainicial}
\end{figure}
\subsection{Anulación de una cita}
En la figura \ref{fig:anula1} podemos ver la pantalla de selección de citas que se desean anular. Podremos seleccionar una de las citas que tengamos confirmadas y tambien podremos anular una cita mediante un localizador y mediante el DNI.\\
Al pulsar sobre el boton ``Anular citas'' nos aparecerá un popup en el que se nos pedirá que confirmemos la operación. Podemos observar este popup en la figura \ref{fig:anula2}
\begin{figure}[H]
\centering
\begin{minipage}{0.45\linewidth}
\includegraphics[width=\textwidth]{2.png}
\caption{Pantalla de selección de las citas para anulación.}
\label{fig:anula1}
\end{minipage}
\begin{minipage}{0.45\linewidth}
\includegraphics[width=\textwidth]{3.png}
\caption{Popup de confirmación de la anulación de las citas.}
\label{fig:anula2}
\end{minipage}
\end{figure}
\subsection{Selección de tipo de documento}
Si en la pantalla inicial fuesemos seleccionado la opción de ``Pedir cita'' accederemos a una nueva pantalla donde nos ofrece la opción de escoger el tipo de documento a renovar mediante 2 botones diferenciados.\\
Podremos seleccionar entre el DNI, en el caso de que tengamos nacionalidad Española, o NIE, en el caso de que seamos residentes extranjeros.\\
\begin{figure}[H]
\centering
\includegraphics[scale=0.2]{4.png}
\caption{Selección de tipo de documento}
\label{fig:tipodoc}
\end{figure}
\subsection{Selección de tipo de cita}
Esta imagen (figura \ref{fig:tipocita}) nos muestra una nueva pantalla a la que se accede cuando pulsas en la opción de DNI de la anterior. Vemos aquí diferentes botones para renovar DNI, Pasaporte o ambos.
\begin{figure}[H]
\centering
\includegraphics[scale=0.2]{5.png}
\caption{Selección de tipo de cita}
\label{fig:tipocita}
\end{figure}
\subsection{Selección de provincia y comisaría}
El siguiente paso nos lleva a la siguiente pantalla en la que tenemos un desplegable para elegir la provincia en la que vamos a pedir la cita y, una vez seleccionada la provincia, nos aparece abajo la lista de comisarias disponibles para elegir nuestra preferencia.
\begin{figure}[H]
\centering
\begin{minipage}{0.45\linewidth}
\includegraphics[width=\textwidth]{6.png}
\caption{Selección de la provincia de entre las disponibles en el desplegable.}
\label{provcom1}
\end{minipage}
\begin{minipage}{0.45\linewidth}
\includegraphics[width=\textwidth]{7.png}
\caption{Selección de la comisaría deseada.}
\label{provcom2}
\end{minipage}
\end{figure}
\subsection{Formulario de datos del usuario}
A continuación nos encontramos ante un formulario en el que debemos introducir los datos requeridos y un botón para continuar.
\begin{figure}[H]
\centering
\begin{minipage}{0.45\linewidth}
\includegraphics[width=\textwidth]{8.png}
\caption{Formulario de datos de usuario necesarios para la renovación del documento}
\label{form1}
\end{minipage}
\begin{minipage}{0.45\linewidth}
\includegraphics[width=\textwidth]{9.png}
\caption{Popup que aparece al no rellenar los campos}
\label{form2}
\end{minipage}
\end{figure}
\subsection{Selección de fecha y hora}
La siguiente pantalla vemos un calendario para seleccionar el día que preferimos nuestra cita y para cada día se van actualizando la disponibilidad de las horas para ese día, estando de color morado las ocupadas y en verde las disponibles.
\begin{figure}[H]
\centering
\includegraphics[scale=0.2]{10.png}
\caption{Selección de la fecha y hora deseada}
\label{fechahora}
\end{figure}
\subsection{Resumen de la cita}
Esta pantalla nos ofrece el resumen de nuestra cita con dos botones con las opciones para confirmar o volver atrás por si nos hemos equivocado en algún campo.
\begin{figure}[H]
\centering
\includegraphics[scale=0.2]{11.png}
\caption{Pantalla de resumen en la que el usuario podrá comprobar si todo esta correcto.}
\label{resumen}
\end{figure}
\subsection{Confirmacion de la cita}
Aquí nos encontramos con un mensaje de confirmación y nos ofrecen la opciones de enviarnos el resumen de la cita por SMS, por correo o añadir un recordatorio en nuestro calendario.
\begin{figure}[H]
\centering
\begin{minipage}{.45\linewidth}
\includegraphics[width=\textwidth]{12.png}
\caption{Pantalla tras la confirmacion de la cita}
\label{confirmacion1}
\end{minipage}
\begin{minipage}{0.45\linewidth}
\includegraphics[width=\textwidth]{13.png}
\caption{Toast que aparece tras pulsar el boton de finalizar.}
\label{confirmacion2}
\end{minipage}
\end{figure}
\section{Evaluacion del prototipo}
En este apartado describimos la evaluación que hemos hecho del prototipo vertical que ya hemos presentado anteriormente, hemos empleado la técnica de recorrido cognitivo para esta evaluación y a continuación presentamos las conclusiones y las propuestas de mejora de nuestro prototipo.\\
En el anexo \ref{diagramapantallas}, presentamos un diagrama de las pantallas de nuestra aplicación.
\subsection{Problemas detectados}
Tras la evaluación de nuestro prototipo se han descubierto varios problemas que afectan a la usabilidad de la apliacación. A continuación se detallarán en más profundidad.
\subsubsection{Problema 1: Los datos se introducen antes de seleccionar el horario deseado.}
Como vemos en el anexo \ref{anexodiagrama}, se llega a la pantalla de formulario en la que el usuario tiene que introducir sus datos después de haber seleccionado la provincia y la comisaria. Este comportamiento simula el comportamiento actual de la web del Ministerio \cite{webcitaDNI} sin embargo, tras la evaluación ha quedado claro que es uno de los problemas mas graves de la aplicación ya que en el caso de que un usuario seleccione una comisaria, rellene sus datos y no pueda seleccionar ningun horario porque estubiese todo ocupado, el usuario deberia de retroceder una patalla para reintroducir sus datos o varias si lo que desea es cambiar de comisaría.
Espe problema se solucionará de una forma muy sencilla como se explicará en el apartado \ref{solucion1}.
\subsubsection{Problema 2: Los botones no estandarizados.}
Tal y como podemos ver en las figuras los botones de nuestro prototipo no estan estandarizados. Algunos de ellos se encuentran en un color y otros en otro. Algunos tienen aplicada un guia de estilo mientras que otros son los botones estandar que renderiza el dispositivo.\\
En la seccion \ref{solucion2} daremos solución a este problema.
\subsubsection{Problema 3: La aplicacion no implementa una función de consulta de citas}\label{consultacitas}
Durante nuestra evaluación nos hemos dado cuenta de que nuestro prototipo no cuenta con una función fundamental que nuestros sujetos de prueban han echado en falta.\\
Esta función sería la de consultar nuestras citas. Si bien es cierto que las citas se pueden consultar en la sección de anular citas, se echa en falta que haya una sección en la que podamos consultar la información de nuestras citas sin el peligro de anularla.
\subsection{Conclusiones de la evaluacion}
\subsubsection{Solucion 1}\label{solucion1}
La solución a este problema es bastante simple; realizando un simple cambio del orden de como se presentan las pantallas al usuario conseguiriamos que el problema no se diese.\\
De este modo, tendriamos dos opciones, que el usuario introduzca sus datos al comienzo de la operación o al final de la operacion. \\
Suponiendo que seleccionamos la primera opción, el usuario introducira todos sus datos al comienzo del todo y posteriormente seleccionará la provincia, comisaria, fecha y horario deseado. Al utilizar esta solución hacemos imposible que el usuario tenga que volver a introducir sus datos si un horario no esta disponible.
\subsubsection{Solucion 2}\label{solucion2}
La solucion a este problema es realmente mucho mas simple. Para estandarizar los botones podriamos utilizar un estilo de botones que sean facilmente entendibles por todas las personas y que aprovechen la memoria a largo plazo de las personas \cite{diapTema2}. Si el lector tiene conocimiento del desarrollo en Android ya estará viendo una solución sencilla, utilizar una guia de estilo estandarizada, en el caso del desarrollo en Android, esta guia de estilo podría ser Material Design \cite{materialdesing}, desarrollada por Google, Material Design se alza como la guia de estilo mas utilizada en Android, por lo que su uso sería mas que razonable.
\subsubsection{Solucion 3}
Tal y como hemos visto en \ref{consultacitas}, una solución sería utilizar parte de la pantalla de anulacion de citas (Figura \ref{fig:anula1}) para utilizarla en una nueva pantalla en la que mostremos los datos de todas la citas.\\
En la figuras figuras \ref{nuevoinicio} y \ref{miscitas} podemos ver como quedaria la pantalla principal y la pantalla de información de las citas tras modificarla e incluirla respectivamente.
\begin{figure}[H]
\centering
\begin{minipage}{.45\linewidth}
\includegraphics[width=\textwidth]{nuevoinicio.png}
\caption{Pantalla inicial tras la modificación}
\label{nuevoinicio}
\end{minipage}
\begin{minipage}{0.45\linewidth}
\includegraphics[width=\textwidth]{miscitas.png}
\caption{Pantalla de información de las citas.}
\label{miscitas}
\end{minipage}
\end{figure}
\newpage
\section{Anexos}
\subsection{Bocetos iniciales}\label{bocetos}
\begin{figure}[H]
\centering
\includegraphics[scale=0.80]{bocetos.jpg}
\end{figure}
\newpage
\begin{landscape}\label{diagramapantallas}
\subsection{Diagrama de pantallas de la aplicación}\label{anexodiagrama}
\begin{figure}[H]
\centering
\includegraphics[scale=0.65]{diagramapantallas.png}
\end{figure}
\end{landscape}
\includepdf[scale=0.8,pages=1,pagecommand=\subsection{Recorrido cognitivo - Hoja de datos}]{recorrido_cognitivo_hoja_de_datos.pdf}
\includepdf[scale=0.8,pages=2-,pagecommand={}]{recorrido_cognitivo_hoja_de_datos.pdf}
\includepdf[scale=0.8,pages=1,pagecommand=\subsection{Recorrido cognitivo - Hoja de evaluacion}]{recorrido_cognitivo_hoja_de_evaluacion.pdf}
\includepdf[scale=0.8,pages=2-,pagecommand={}]{recorrido_cognitivo_hoja_de_evaluacion.pdf}
\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{diapTema2}
José mariano González Romano y Víctor Díaz Madrigal,
\textit{Usabilidad},
\href{https://s3-eu-central-1.amazonaws.com/learn-eu-central-1-prod-fleet01-xythos/5ac734ed505df/1548262?response-content-disposition=inline%3B%20filename%2A%3DUTF-8%27%27IPO-2018-19-02-Usabilidad.pdf&response-content-type=application%2Fpdf&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20181108T092002Z&X-Amz-SignedHeaders=host&X-Amz-Expires=21600&X-Amz-Credential=AKIAIZ3QX2YUHH4EOO3A%2F20181108%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Signature=b6f88f86fcc8fc9e65cb7762b151621c9d17779d12ea366fa9e6cf74db65f16f}{Diapositivas de clase. Tema 2}.
\bibitem{diapTema3}
José mariano González Romano y Víctor Díaz Madrigal,
\textit{Prototipado},
\href{https://s3-eu-central-1.amazonaws.com/learn-eu-central-1-prod-fleet01-xythos/5ac734ed505df/1717656?response-content-disposition=inline%3B%20filename%2A%3DUTF-8%27%27IPO-2018-19-03-Prototipado.pdf&response-content-type=application%2Fpdf&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20181108T092046Z&X-Amz-SignedHeaders=host&X-Amz-Expires=21600&X-Amz-Credential=AKIAIZ3QX2YUHH4EOO3A%2F20181108%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Signature=a298d276e4c75007b2970ddc1e4aa7fa8c92e35d85e8ed270504f153329534cb}{Diapositivas de clase. Tema 3}.
\bibitem{diapTema4}
José mariano González Romano y Víctor Díaz Madrigal,
\textit{Evaluación},
\href{https://s3-eu-central-1.amazonaws.com/learn-eu-central-1-prod-fleet01-xythos/5ac734ed505df/1868140?response-content-disposition=inline%3B%20filename%2A%3DUTF-8%27%27IPO-2018-19-04-Evaluaci%25C3%25B3n.pdf&response-content-type=application%2Fpdf&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20181108T092127Z&X-Amz-SignedHeaders=host&X-Amz-Expires=21600&X-Amz-Credential=AKIAIZ3QX2YUHH4EOO3A%2F20181108%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Signature=df3ee954b039d2239e0947995469951f22d0bd91826341575b083d05e3865ccc}{Diapositivas de clase. Tema 4}.
\bibitem{carolyn2003retroalimentacion}
Carolyn, Snyder,
\textit{Paper prototyping : the fast and easy way to design and refine user interfaces},
Morgan Kaufmann, Elsevier Science. ISBN 9780080513508. OCLC 63116735.
\bibitem{webcitaDNI}
Ministerio del interior,
\href{https://www.citapreviadnie.es/citaPreviaDniExp/}{\textit{Solicitud de Cita Previa para DNI o Pasaporte}}, Página Web.
\bibitem{gonzalez2016paradigmas}
J. M. González Romano
\textit{Dispositivos, estilos y paradigmas}, 2016, Universidad de Sevilla
\bibitem{androidstudio}
Google
\href{https://developer.android.com/studio/}{\textit{Android Studio}}, Pagina Web.
\bibitem{materialdesing}
Google
\href{https://material.io/}{\textit{Material Design}}, Pagina Web.
\end{thebibliography}
\end{document}