Transformación de una aplicación móvil utilizando Material ...openaccess.uoc.edu/webapps/o2/bitstream/10609/... · Transformación de una aplicación móvil utilizando Material

Transformación de una aplicación móvil utilizando Material Design Usabilidad e interfaces - Multimedia

Autor: Denisse Gómez Casco

Consultora: Judit Casacuberta Bagó

Profesor: Ferran Gimenez Prado

13-01-2019

TFG. Transformación de una aplicación móvil utilizando Material Design Denisse Gómez

1 / 69

Reconocimiento-NoComercial-SinObraDerivada (CC BY-NC-ND 4.0)

Este proyecto está sujeto bajo la licencia de Reconocimiento-NoComercial-SinObraDerivada

Usted es libre de:

Compartir – copiar y redistribuir el material en cualquier medio o formato

Bajo las siguientes condiciones:

• Reconocimiento - Debe reconocer la autoría, proporcionar el enlace a la licencia e

indicar si se han realizado cambios. Puede hacerlo de alguna manera razonable, pero

en ningún caso que sugiera que tiene el apoyo del licenciador o lo recibe por el uso que

hace.

• NoComercial - No puede utilizar el material con finalidad comercial.

• SinObraDerivada - Si mezcla, transforma o utiliza el material para crear otro, no puede

distribuir el material modificado.

No existen restricciones adicionales – No puede aplicar términos legales o medidas

tecnológicas que legalmente restrinjan realizar aquello que la licencia permite.

Información de la licencia en este enlace: https://creativecommons.org/licenses/by-nc-nd/4.0/

https://creativecommons.org/licenses/by-nc-nd/4.0/

https://creativecommons.org/licenses/by-nc-nd/4.0/


2 / 69

Cita

[Inglés]

“If you can’t explain it simply, you don’t understand it well enough”

Albert Einstein

[Castellano]

“Si no lo puedes explicar con simplicidad, es que no lo entiendes suficientemente

bien”

Albert Einstein


3 / 69

Abstract

Con el paso del tiempo, las tecnologías cambian y con ellas también el diseño de las interfaces,

no es lo mismo hablar de una aplicación de hace 10 años a una aplicación actual que esté basada

en las guías de Material Design, las aplicaciones actuales además de tener un Look and Feel

más atractivo, utilizan los gestos humanos para facilitar la interacción, son más intuitivas, fáciles

de usar y se adaptan a las necesidades del usuario.

En Barcelona existen muchas empresas que se dedican al desarrollo de software, sin embargo,

no todas se preocupan por analizar las necesidades del cliente y del usuario final, por lo tanto,

diseñan aplicaciones funcionales, pero no usables.

Después de hacer prácticas durante 8 meses en una empresa de desarrollo, he podido

comprobar que este problema sucede y he querido hacer mi trabajo final de grado lo más real

posible, utilizando la aplicación móvil en la cual he participado, con el fin de renovar su diseño

aplicando las guías de Material Design.

El proyecto se divide en cuatro partes, planificación, diseño, desarrollo y mejoras.

Durante la planificación y un par de meses antes de empezar el proyecto, me he dedicado a

estudiar los programas y los Frameworks que quería utilizar desarrollar el proyecto, como

Angular, Angular Material, Sass, Visual Studio Code y las guías de Material Design.

En la fase de diseño he creado diferentes perfiles de usuario para aplicar el DCU, he hecho un

análisis heurístico para detectar las partes a mejorar de la aplicación y con ellos he creado los

Wireframes.

Seguidamente, he utilizado la guía de estilo de la empresa para que la aplicación pueda ser

identificada con la marca y he utilizado las guías de Material Design para desarrollar la parte

Frontend de la aplicación, creando Mockups interactivos y aplicando el diseño de los Wireframes

hechos con anterioridad.

Finalmente, después de ejecutar los tests para verificar que todas las partes de la aplicación

estuvieran bien implementadas y su comportamiento haya sido aplicado en los Mockups

interactivos, he añadido algunas mejoras a la aplicación.

Palabras clave: Material Design, Usabilidad, Inspecciones, Aduanas, Inspectores, Inspecciones

fronterizas.


4 / 69

Abstract (English version)

As time goes by, technologies change and with it also the interface design, is not the same to

speak about a 10 years old application than speaking about a modern application base on

Material Design, modern applications apart from having an atractive Look and Feel, they use ease

the interaction, they are more intuitive, easy to use and they adapt to users needs.

In Barcelona there are many companies that dedicated to software development, however, not

all of them anlyze the needs of both clients and end users, therefore, they design functional, but

not usable apps.

After doing an internship during 8 months on a development company, I have been able to see

by myself that this problem is real and I have wanted to do my final thesis as real as posible, using

the mobile application in which I have participated, with the purpose of renewing its design

applying Material Design.

The Project is divided in four parts, planning, design, development and make improvements.

During the planning and a couple of months before starting the project I have dedicated myself to

study the software and frameworks I needed to develop the project, as Angular, Sass, Visual

Studio Code and Material Design.

During the design phase I have created different user profiles to aply the UCD, I did an heuristic

analysis to find out the parts of the application that need to be improve and with them I created

the Wireframes.

To continue, I have used the design guidelines of the company in order to match the application

with the company brand and used the Material Design guidelines to develop the Frontend of the

applicaton, creating interactive mockups by applying the design of the Wireframes done

previously.

Finally, after executing the tests to verify all the parts of the application have been well

implemented and its behavior has been applied on the interactive mockups, I have added some

improvements to the application.

Keywords: Material Design, Usability, Inspections, Customs, Inspectors, Border inspections.


5 / 69

Agradecimientos

A mis padres, por haberme guiado desde la niñez hasta mi juventud a alcanzar mis objetivos,

por hacer de mí una persona fuerte independientemente de las circunstancias.

A mi compañero de vida, mi marido, por su gran ejemplo de dedicación y amor por la tecnología,

la motivación que me ha brindado en los momentos más difíciles y por su apoyo incondicional.


6 / 69

Índice

Transformación de una aplicación móvil utilizando Material Design ............................................ 0

Cita ................................................................................................................................................ 2

Abstract ......................................................................................................................................... 3

Abstract (English version) ............................................................................................................. 4

Agradecimientos ............................................................................................................................ 5

Introducción ................................................................................................................................... 9

Descripción .................................................................................................................................. 10

Flujo de una inspección ........................................................................................................... 10

El inspector .............................................................................................................................. 10

La aplicación del Inspector ...................................................................................................... 10

• Orden de inspección .................................................................................................... 11

• Detalles del orden ........................................................................................................ 11

• Embalaje ...................................................................................................................... 11

• Artículos ....................................................................................................................... 11

• Verificación visual ........................................................................................................ 11

• Resultado de la Inspección ......................................................................................... 11

• Documentos asociados ............................................................................................... 11

Objetivos ...................................................................................................................................... 12

Principales ............................................................................................................................... 12

Secundarios ............................................................................................................................. 12

Metodología ................................................................................................................................. 13

Plataforma de desarrollo ............................................................................................................. 14

Software ................................................................................................................................... 14

• Maquetación ................................................................................................................ 14

• Diseño ......................................................................................................................... 14

• Programación .............................................................................................................. 14

Hardware ................................................................................................................................. 14

Planificación ................................................................................................................................ 15

Hitos ......................................................................................................................................... 15

Diagrama de Gantt .................................................................................................................. 16

Usabilidad .................................................................................................................................... 17

Evaluación heurística de la aplicación a rediseñar.................................................................. 17

1. Página principal sin título ............................................................................................ 18

2. Vínculos y botones con poco contraste y demasiado pequeños ................................ 19


7 / 69

3. Iconos y botones poco intuitivos ................................................................................. 20

4. La visualización de la información no está bien estructurada ..................................... 21

5. Los campos informativos se muestran con un fondo. ................................................. 22

6. No hay un icono de menú o tags para ir a las diferentes secciones ........................... 23

7. Exceso de botones para una aplicación móvil ............................................................ 25

8. Pasos innecesarios para algunos procesos ................................................................ 26

9. Colores demasiado oscuros y no utilizan los colores corporativos ............................. 28

10. La utilización de la tablet en horizontal hace que sea más incómodo añadir datos. .... 29

Diagramas UML........................................................................................................................... 30

Diagrama de componentes ...................................................................................................... 30

Diagrama de secuencia ........................................................................................................... 30

Prototipo ...................................................................................................................................... 31

Wireframes ............................................................................................................................... 31

Mockups ................................................................................................................................... 32

Mockups Tablet .................................................................................................................... 32

Mockups Móvil ..................................................................................................................... 33

Diseño visual de la aplicación ..................................................................................................... 34

Elementos de la guía de estilo corporativa .............................................................................. 34

Guía de colores corporativa ................................................................................................. 34

Elementos de Material Design ................................................................................................. 34

Fuente Roboto ..................................................................................................................... 34

Botones ................................................................................................................................ 34

Iconografía ........................................................................................................................... 34

Perfiles de usuario ....................................................................................................................... 35

Perfil 1 ...................................................................................................................................... 35

Perfil 2 ...................................................................................................................................... 36

Perfil 3 ...................................................................................................................................... 37

Tests ............................................................................................................................................ 38

Test 1 ....................................................................................................................................... 38

Test 2 ....................................................................................................................................... 39

Test 3 ....................................................................................................................................... 40

Test 4 ....................................................................................................................................... 41

Test 5 ....................................................................................................................................... 42

Test 6 ....................................................................................................................................... 43

Test 7 ....................................................................................................................................... 44

Test 8 ....................................................................................................................................... 45

Instrucciones de uso ................................................................................................................... 46


8 / 69

Introducción ............................................................................................................................. 46

Instalación de la aplicación ...................................................................................................... 46

Pending inspections ................................................................................................................. 47

General Info ............................................................................................................................. 49

Order details ............................................................................................................................ 50

Attachments ............................................................................................................................. 51

Packaging ................................................................................................................................ 52

Items & Discrepancies ............................................................................................................. 53

Verification ............................................................................................................................... 56

Result ....................................................................................................................................... 57

Findings ....................................................................................................................................... 58

1. Diferente separación entre elementos a las demás páginas .......................................... 58

2. El texto del botón está en minúsculas ............................................................................. 59

3. Implementar el componente Speed dial .......................................................................... 59

Solución de findings .................................................................................................................... 60

1. Todos los elementos tienen la misma separación .......................................................... 60

2. El texto del botón está en mayúsculas ............................................................................ 60

3. El componente Speed Dial ha sido implementado ......................................................... 61

Proyección a futuro ..................................................................................................................... 62

Presentar el proyecto a la empresa ..................................................................................... 62

Implementar el nuevo diseño en una aplicación real ........................................................... 62

Presupuesto ................................................................................................................................ 63

Equipo humano ........................................................................................................................ 63

Equipo técnico ......................................................................................................................... 63

Conclusiones ............................................................................................................................... 64

Anexos ......................................................................................................................................... 65

Anexo 1: Evaluación heurística ............................................................................................... 65

Anexo 2: Prototipos LO-FI ....................................................................................................... 65

Anexo 3: Prototipos HI-FI ........................................................................................................ 65

Anexo 4: Código de la parte Frontend de la aplicación ........................................................... 65

Anexo 5: Bibliografía ................................................................................................................ 65

Anexo 6: Vita............................................................................................................................ 65

Bibliografía ................................................................................................................................... 66

Vita .............................................................................................................................................. 68


9 / 69

Introducción

A menudo, los dirigentes de las empresas que se dedican al desarrollo de aplicaciones piensan

que lo más importante es poder contratar a los mejores desarrolladores para llevar a cabo la

aplicación que desean vender a sus clientes. Sin embargo, aunque es imprescindible disponer

de un equipo cualificado de desarrollo, también es importante disponer de otros roles como el de

diseñadores UX/UI para que puedan analizar los requisitos del jefe de producto, estudiar los tipos

de perfiles de personas y el entorno donde se utilizará la aplicación, para poder crear un diseño

de la interfaz personalizado y procesos que satisfagan las necesidades del usuario.

Actualmente, hago prácticas como QA tester en una multinacional que se dedica a las

inspecciones portuarias y fronterizas, habitualmente los equipos están formados por un jefe de

proyecto, un jefe de producto, desarrolladores y testers, los cuales se encargan de entregar un

producto sin errores al cliente. Sin embargo, aunque las aplicaciones funcionen muy bien y se

cumpla con los objetivos principales, el diseño de la interfaz no está adaptado a los perfiles, ni al

entorno donde se utilizará la aplicación. Además, algunas veces, los desarrolladores pierden

tiempo pensando en soluciones de usabilidad para algunas de las implementaciones de las

aplicaciones, que no resultan ser las más visuales o las más usables.

Por los motivos descritos con anterioridad, el propósito de mi trabajo final de grado es dar

importancia al diseño de interfaz y usabilidad. Si se diseña una aplicación desde el principio, el

equipo podrá tener más claros los objetivos del proyecto, habrá menos confusiones y el cliente

podrá tener una aplicación atractiva, adaptada a su comportamiento y a sus necesidades.

Estoy participando en una aplicación móvil para tablets, la cuál será utilizada por inspectores en

controles portuarios y fronterizos de algunos países, para que estos puedan controlar el flujo de

las mercancías y ver si existe algo sospechoso dentro de ellas, como el tráfico de personas,

drogas, armas, etc.

Mis principales objetivos son mejorar el diseño de las interfaces de la aplicación utilizando los

colores corporativos de la empresa, adaptar el producto al usuario, hacer la aplicación más

atractiva visualmente utilizando las guías de Material Design y facilitar los procesos de usabilidad

a los usuarios.


10 / 69

Descripción

Flujo de una inspección El proceso de una inspección empieza cuando llega el camión al sitio de control que puede ser

en un puerto o en las fronteras, éste es recibido por el rol de Traffic Marshal, el cual se encarga

de tomar fotos del camión, del remolque y del contenedor con sus respectivos números de

identificación.

Seguidamente, el camión pasa por un scanner de grandes dimensiones, que captura imágenes

de lo que contiene el camión por dentro, por medio de rayos x. Las imágenes tomadas por el

Traffic Marshal y las tomadas por el scanner llegan a otro operario que es el System Operator,

el cual se encarga de validar o rechazarlas.

Por otra parte, otro operario se encarga de declarar todo lo que contiene el contenedor del

camión, describe cuanto pesan las mercancías, de que tipo son, en que vienen empaquetadas,

si son para importar o para exportar, etc.

Todos los documentos recopilados por los anteriores roles llegan al Image Analysis Officer, que

es quien se encarga de analizar las imágenes enviadas por el scanner con una aplicación que le

permite editar la imagen para poder ver si existen objetos sospechosos.

En el caso de que existan objetos sospechosos, el flujo de la aplicación continúa con el Inspector

Coordinator, el cual se encarga de asignar la declaración sospechosa a un Inspector, para que

el Inspector pueda revisar las mercancías in situ y dar un veredicto.

El inspector Siguiendo el flujo anterior, la declaración llega al Inspector para que, con toda la documentación

recogida digitalmente, éste pueda ir con su Tablet al sitio donde se encuentra el camión que debe

revisar. El objetivo principal es revisar las mercancías que han sido declaradas anteriormente

por el DR Operator y comprarlas con las mercancías encontradas en el camión para saber si hay

más cosas que no han sido declaradas o si faltan cosas, en el caso de encontrar materiales

sospechosos el veredicto será sospechoso y el camión no podrá pasar el control de aduanas.

La aplicación del Inspector La aplicación que utilizará el Inspector se tratará de una aplicación móvil e híbrida adaptada

especialmente para ser utilizada en tablets. La aplicación que se está desarrollando se divide en

las siguientes partes:


11 / 69

• Orden de inspección Sección donde se encuentran los datos más relevantes de la Inspección en modo lectura

como el país de proveniencia, el nombre del declarante, del exportador o importador, la

fecha, la oficina, una breve descripción, etc.

• Detalles del orden Sección en donde el Inspector debe escribir el lugar, el nombre y correo electrónico del

representante del cliente, nombre y correo electrónico del agente de la aduana, la hora

de llegada del inspector y cuando empieza la inspección.

• Embalaje En esta sección el Inspector escribe cuantos tipos de paquetes hay en el camión, si hay

bolsas, pallets, cajas, etc.

• Artículos Sección en donde aparecen los ítems con los detalles que el DR Operator declaró con

anterioridad, los cuales pueden ser editados o eliminados por el Inspector para crear una

divergencia en el caso de que haya más o menos mercancías y también donde puede

añadir nuevos artículos siempre con una imagen adjunta del mismo para demostrar que

existe.

• Verificación visual Donde el Inspector puede marcar las características de la inspección como si hay fotos,

el estado de los paquetes, si la mercancía ha tenido control visual, si tienen fecha de

expiración, etc.

• Resultado de la Inspección La parte más importante de la aplicación, donde el Inspector dependiendo de la revisión,

marcará si el camión contiene material sospechoso o no, si el material no es sospechoso

aparecerá un documento que deberá ser firmado por los representantes y el Inspector,

en el caso de que sea sospechoso, el comentario es obligatorio y todo se enviará

directamente al Coordinador. También donde se debe poner la hora de finalización de la

Inspección.

• Documentos asociados La sección en la cual se puede consultar cualquiera de los documentos añadidos por los

anteriores operarios y donde se pueden añadir más documentos relacionados con la

Inspección.


12 / 69

Objetivos

Principales • Estudiar los puntos a mejorar de la aplicación actual por medio de un análisis heurístico.

• Pensar en una usabilidad más eficiente e intuitiva para el usuario.

• Diseñar interfaces atractivas para el usuario.

• Identificar el producto con la marca de la compañía.

• Diseñar Wireframes

• Desarrollar la parte de Frontend de la aplicación con el framework Angular

• Emplear Material Design para el diseño de las interfaces.

• Aplicar los conocimientos adquiridos en el grado de Multimedia.

• Cumplir los plazos marcados en el proyecto.

Secundarios • Aprender a usar el procesador de CSS Sass.

• Mostrar el proyecto final dentro de la empresa para obtener feedback.


13 / 69

Metodología

Uso de la metodología “Modelo de Cascada y Retroalimentada”. El modelo de Cascada Común

consiste en avanzar con la siguiente fase, una vez terminada la anterior. El proceso de

retroalimentación permite modificar objetivos anteriores con la finalidad de poder mejorar el

proyecto con el feedback recibido.

Resumen de las fases principales:

• Planteamiento del problema, conociendo la aplicación actual, identificando sus

requisitos. Incluyendo un análisis heurístico para saber que partes de la aplicación no

son usables y que partes de la interfaz están mal planteadas.

• Búsqueda de información para dar solución a los problemas encontrados.

• Diseño de Wireframes de la nueva interfaz de la aplicación

• Implementación del diseño programando el Frontend de la aplicación

• Comprobación de que el Frontend de la aplicación funciona correctamente por medio de

testing y comprobar que no contiene bugs.


14 / 69

Plataforma de desarrollo

Software

• Maquetación o Office 365

Utilización de Microsoft Excel para el diagrama de Gantt, Microsoft Word para la

maquetación del trabajo final de carrera y Power Point para la presentación.

• Diseño o Material design

Web para consulta de diseño y funcionalidad de componentes según las guías

de estilo de Google y utilización libre de iconos publicados en su web. o Draw.io

Herramienta online para el diseño de Wireframes con formas predefinidas.

• Programación o Visual Studio Code

Aplicación de escritorio libre para la edición de código para Frontend o Firebase

Para publicación de la aplicación

o Git Repositorio web para guardar las versiones de la aplicación Frontend y guardar

las actualizaciones de forma organizada.

o Angular Framework para crear aplicaciones web.

o Angular material Que dispone de componentes predefinidos basados en la guía de estilo de

Material Design.

Hardware o Surface Pro 4

Ordenador y Tablet de pantalla táctil con sistema operativo Windows 10,

procesador de sexta generación, 16gb de ram y 512gb de almacenamiento.

o Lápiz para Surface Lápiz táctil para Surface Pro 4 utilizado para diseño de Wireframes.

o Monitor Gaming AOC Monitor de 21.5’’, con pantalla LCD y resolución Full HD.


15 / 69

Planificación

Las fechas clave de entrega están basadas en las fechas de los entregables que se piden en

cada PEC, junto con la metodología descrita en el apartado anterior.

Hitos


16 / 69

Diagrama de Gantt

19-9 9-10 29-10 18-11 8-12 28-12 17-1

Primera parte de la memoriaPlanificación del proyecto

Familiarización con la aplicación a mejorarEntrega de primera fase

Correcciones de la primera faseSegunda parte de la memoria

Prueba de usabilidad (Análisis heurístico)Diseño y estructuración de los contenidos

Diseño de WireframesDiseño visual de la aplicación

Entrega de segunda faseCorrecciones de la segunda fase

Desarrollo Frontend de la aplicaciónTesteo de la aplicación

Resolución de BugsPublicación del proyecto

Entrega de tercera faseCorrecciones de la tercera fase

Finalización de la memoriaFinalización del proyecto

Presentación del proyecto por escritoPresentación del proyecto por videoRedactar autoinforme de evaluación

Entrega final

Diagrama de Gantt


17 / 69

Usabilidad

Evaluación heurística de la aplicación a rediseñar Se ha realizado una evaluación heurística de la aplicación actual Coview, para saber los aspectos

que se tienen que mejorar en el siguiente diseño de la aplicación.

La evaluación heurística empleada está basada en los 10 principios heurísticos de Jakob Nielsen,

los cuales se enfocan en:

1. La visibilidad del estado del sistema.

2. La correspondencia entre el sistema y el mundo real

3. El control y libertad del usuario.

4. Consistencia y estándares.

5. Evitar errores.

6. Reconocimiento.

7. Flexible y eficiente.

8. Diseño minimalista.

9. Reconocer, diagnosticar y recuperarse de los errores.

10. Ayuda y documentación.

También se ha empleado la lista de comprobación de ítems de Deniese Pierotti, los cuales se

basan en:

11. Habilidades.

12. Interacción con el usuario placentera y respetuosa.

13. Privacidad.

En el resumen del análisis heurístico adjunto en los anexos se pueden observar los resultados

de las funcionalidades y partes de la aplicación que no cumplen con los estándares establecidos

y que por lo tanto se deben cambiar.

A continuación, muestro los problemas más importantes encontrados durante la evaluación con

sus respectivas soluciones.


18 / 69

1. Página principal sin título La página principal solo tiene el título genérico, no describe el contenido de esta y tampoco

es orientativo.

ILUSTRACIÓN 1. PÁGINA PRINCIPAL - APLICACIÓN COVIEW

Solución: Poner un título orientativo para cada una de las páginas.

ILUSTRACIÓN 2. TEMA CRANE - MATERIAL DESIGN

https://material.io/design/material-studies/crane.html#color


19 / 69

2. Vínculos y botones con poco contraste y demasiado pequeños Los vínculos de la página Items son iconos muy pequeños y no hacen contraste con el

fondo, eso hace que sean difíciles de identificar. Por otra parte, los botones son demasiado

pequeños y no cumplen con los estándares, ubicación, medidas, espacio entre ellos.

ILUSTRACIÓN 3. PÁGINA ÍTEMS - APLICACIÓN COVIEW

Solución: Poner enlaces de iconos con suficiente grosor, que hagan contraste con el fondo

y utilizar botones que cumplan con los estándares.

ILUSTRACIÓN 4. TEMA SHRINE. MATERIAL DESIGN

https://material.io/design/material-studies/shrine.html


20 / 69

3. Iconos y botones poco intuitivos Al abrir un documento, éste se cierra cuando presiono el icono de “no ver contraseña”.

ILUSTRACIÓN 5. VISUALIZACIÓN DE DOCUMENTOS ASOCIADOS - APLICACIÓN COVIEW

Los cambios se guardan con un check

ILUSTRACIÓN 6. PÁGINA DE DETALLES DEL ORDEN - APLICACIÓN COVIEW

Solución: Utilizar iconos que representen la acción que queremos hacer:

o Para cerrar un documento abierto se debería usar una x. o Para guardar los cambios debería haber un icono de un disquete o la palabra guardar.


21 / 69

4. La visualización de la información no está bien estructurada Las páginas se dividen en dos partes, en la parte izquierda se muestra la sección en la cual

nos encontramos y en la parte derecha siempre aparece la sección de los documentos

asociados.

ILUSTRACIÓN 7. PÁGINA DE EMBALAJE - APLICACIÓN COVIEW

Solución: Que cada página tenga solo un objetivo, es decir, que la sección “Orden de

inspección”, “Detalles del orden”, “Embalaje”, “Artículos”, “Verificación visual”, “Resultados

de la inspección” y “Documentos asociados” tengan su propia página.


22 / 69

5. Los campos informativos se muestran con un fondo. Los campos de la página “Orden de inspección” se muestran con un fondo gris.

ILUSTRACIÓN 8. PÁGINA DE ORDEN DE INSPECCIÓN - APLICACIÓN COVIEW

Solución: Poner solo los datos en la página, que los datos no tengan ningún tipo de fondo

para que no lleven a la confusión.

ILUSTRACIÓN 9. TEMA SHRINE - MATERIAL DESIGN

https://material.io/design/material-studies/shrine.html


23 / 69

6. No hay un icono de menú o tags para ir a las diferentes secciones En su lugar solo está el logo de la aplicación y aunque se puede abrir el menú desplazando

el dedo desde el borde izquierdo de la página hacia la derecha, este gesto no es intuitivo

para el usuario.


ILUSTRACIÓN 11. MENÚ - APLICACIÓN COVIEW


24 / 69

Solución: Colocar un menú con iconos que representen a cada página en la parte inferior

de cada una de ellas.

ILUSTRACIÓN 12. TEMA OWL - MATERIAL DESIGN

https://material.io/design/material-studies/owl.html#motion


25 / 69

7. Exceso de botones para una aplicación móvil La página principal muestra todos los datasets que el Inspector tiene que inspeccionar.

o El botón refrescar para refrescar la página y ver si han llegado nuevos datasets.

o El botón sincronizar que envía los datasets que el inspector ha finalizado.

o Empezar para abrir un dataset y empezar la inspección.

o Descargar para descargar un dataset y trabajar offline, seleccionando antes el dataset.


Solución:

o Quitar los botones refrescar y sincronizar y que sea

automático.

o En vez de tener un botón de empezar inspección,

que se abra al seleccionar el dataset

o Que los datasets una vez abiertos se descarguen

automáticamente en el dispositivo.



26 / 69

8. Pasos innecesarios para algunos procesos En la página Items, se muestran los ítems que el DR operator ha declarado con anterioridad,

el inspector puede editarlos suprimirlos y añadir nuevos items en el caso de que exista

alguna discrepancia. Debajo de los ítems siempre aparecen los campos editables, aunque

no queramos editar ningún ítem, impidiendo ver la totalidad de estos.

Para editar un ítem primero tiene que ser seleccionado, se abren los campos a editar debajo

de los ítems, se presiona el botón seleccionar para que los campos puedan ser editables y

una vez editados estos se pueden guardar o deseleccionar para que vuelvan a su estado

inicial.



27 / 69


Solución: Pensar en un proceso más sencillo e intuitivo para editar ítems.

o Que en la página se muestren todos los ítems, sin tener que compartir espacio con los

campos editables si no se quiere editar ningún ítem.

o Al presionar sobre un ítem, que se abra una nueva página para editar los campos.



28 / 69

9. Colores demasiado oscuros y no utilizan los colores corporativos El color de fondo de la página principal es azul oscuro, cuando los operarios están

trabajando bajo el sol no pueden ver los datos con claridad porque las pantallas oscuras

reflejan la luz del sol, los colores actuales no son los corporativos y tampoco son atractivos.


Solución: Utilizar fuente de color negra sobre fondo blanco y que la barra de título junto con

los botones tenga los colores de la guía de estilo de la marca, utilizar también el logo de la

aplicación disponible en la intranet de la empresa.

ILUSTRACIÓN 19. LOGO DE LA APLICACIÓN - INTRANET COTECNA


29 / 69

10. La utilización de la tablet en horizontal hace que sea más incómodo

añadir datos. La aplicación actual utiliza la posición horizontal permanente y adicionalmente la empresa

brinda soportes para tablets para que sea más fácil la sujeción de la está a la mano.

Solución: Para jugar videojuegos la posición natural de la tablet es en horizontal porque los

controles de los juegos están a los extremos de esta. Sin embargo, la acción más cómoda

para añadir datos estando de pie es coger la tablet con una mano en vertical y escribir con

la otra mano.

ILUSTRACIÓN 20. TEMA SHRINE - MATERIAL DESIGN

https://material.io/design/material-studies/shrine.html#color


30 / 69

Diagramas UML

Diagrama de componentes

Diagrama de secuencia


31 / 69

Prototipo

Wireframes Para el diseño de los Wireframes se ha tenido en cuenta el Análisis heurístico de la aplicación a

mejorar y también la guía de diseño de Material Design para la creación de los contenidos,

ubicación de botones, presentación de la información, etc.

Los Wireframes adjuntos en el anexo son de tipo Lo-Fi, prototipos de baja calidad, en el cual

predomina la estructura y los componentes básicos que la aplicación tendrá en el futuro.


32 / 69

Mockups

Para el desarrollo de los Mockups he utilizado Angular, Sass y Angular Material, he ajustado las

vistas para que el mismo código pueda ser Responsive. Por lo tanto, los Mockups a su vez son

la parte Frontend, los cuales son de tipo HI-FI, puesto que muestran la aplicación con acabados

de calidad, con detalles, aplicando los colores finales y utilizando valores reales.

Mockups Tablet


33 / 69

Mockups Móvil

En los anexos se adjuntan todos los mockups, tanto como para la vista móvil, como para la tablet.


34 / 69

Diseño visual de la aplicación

Elementos de la guía de estilo corporativa El diseño visual de la aplicación se basa en las guías de

estilo que la empresa Cotecna tiene publicada en su intranet.

Guía de colores corporativa

Elementos de Material Design Los demás elementos siguen las guías de Material Design.

Fuente Roboto Tipos de campos

Iconografía

Botones


35 / 69

Perfiles de usuario

La aplicación es un complemento para que los inspectores puedan rellenar toda la información

necesaria acerca de las mercancías que revisan, indicando si estas cumplen con todos los

requerimientos o de lo contrario son objetos sospechosos.

Los operarios tienen entre 25 y 55 años, el porcentaje de hombres es de 70% y el de las mujeres

es de 30% aproximadamente.

Las inspecciones se realizan especialmente en puertos y fronteras, donde los inspectores tienen

que movilizarse a pie o por medio de pequeños automóviles. Si existen envíos con muchas

mercancías, las inspecciones pueden durar días.

A continuación, utilizo la “técnica personas” o “modelado de usuarios” para definir usuarios de

diferentes características que usarían la aplicación para realizar una inspección.

Perfil 1

Nombre: Laura

Sexo: Mujer

Edad: 25 años

Estudios: Administración de empresas

Estado civil: Soltera

Hobbies: Leer, escuchar música, ir al cine e ir al gimnasio

Ocupación: Inspectora

Horario de trabajo: 8.00 – 12.00

Discapacidades: Ninguna

Descripción: Laura está finalizando su carrera online y trabaja media jornada en la frontera como inspectora para pagarse sus estudios. Su conocimiento de informática es medio, puesto que estudia online, sabe utilizar el correo electrónico, internet y el paquete de office.

Escenario: Laura debe realizar una inspección de un contenedor que viene de Marruecos con materiales artesanos de alta calidad, debe ser muy cuidadosa con los objetos y visualizar si existen materiales sospechosos o personas escondidas en las mercancías.


36 / 69

Perfil 2

Nombre: Fernando

Sexo: Hombre

Edad: 38 años

Estudios: Arquitectura

Estado civil: Soltero

Hobbies: Hacer running, senderismo, hacer piscina, internet y sacar a pasear a sus perros

Ocupación: Inspector


Discapacidades: Ninguna

Descripción: Después de estar un año en el paro, Fernando decidió cambiar de profesión, presentó su currículum a una empresa dedicada a inspecciones y fue elegido. Él trabaja una jornada entera y disfruta mucho de su trabajo porque adora la tecnología y en su trabajo hace uso de una Tablet para añadir los datos que encuentra en las revisiones.

Escenario: Habitualmente por la experiencia que tiene Fernando le asignan contenedores que pueden contener drogas, él dispone de un perro experto en drogas. Esta vez se le asigna un contenedor que proviene de Sudamérica el cual podría contener sustancias ilegales.


37 / 69

Perfil 3

Nombre: Carlos

Sexo: Hombre

Edad: 53 años

Estudios: Albañil

Estado civil: Casado

Hobbies: Ir al cine, escuchar música, salir en familia

Ocupación: Inspector


Discapacidad: 20%

Descripción: Carlos fue albañil de joven, pero después empezó a trabajar como Inspector, tiene 25 años trabajando como inspector, a los 45 tuvo un accidente en la empresa, lo cual lo dejó con un 20% de discapacidad. Tiene poco conocimiento de informática puesto que toda su vida ha trabajado con lápiz y papel.

Escenario: Para agilizar el proceso de trabajo, la empresa de Carlos decide empezar a utilizar tablets para las inspecciones, por lo tanto, Carlos tiene que adaptarse a su uso para realizar su trabajo diario.


38 / 69

Tests

El nuevo diseño de la aplicación solo tendrá los componentes visuales de la aplicación, es decir,

que solo tendrá la parte Frontend de la aplicación, sin ningún tipo de lógica detrás.

Las pruebas se basan en tests habituales que se realizan en una empresa de desarrollo antes

de finalizar un proyecto, que es por medio de testers que crean casos de prueba de los elementos

que debe tener y hacer la aplicación y ejecutarlos cuando la parte Frontend de la aplicación esté

lista.

Test 1 Verificar estructura y enlaces de página principal.

Pasos Resultado esperado

Poner el enlace de la aplicación Coview en el navegador

La aplicación se abre

Hacer clic derecho sobre la pantalla del navegador y dar clic sobre la opción inspeccionar

El código de la aplicación aparece al lado derecho de esta

Clic en el botón Toogle device toolbar en la

parte superior del código

Sobre la aplicación aparecen los tipos de dispositivos

Seleccionar la opción iPad o móvil La página de la aplicación se adapta al tamaño de la pantalla del iPad

Verificar que en la página principal aparece:

o Un toolbar en la parte superior con un menú, el icono de la aplicación y un icono de notificaciones.

o Una tarjeta con un buscador y los datasets a inspeccionar.

o Tags con iconos de las secciones en la parte inferior de la aplicación.

La página contiene todos los elementos indicados

Resultado del test: Satisfactorio


39 / 69

Test 2 Verificar estructura y enlaces de la página General Info










Clic sobre un dataset El dataset se abre

Verificar que se abre la página de General Info

Verificar que en la página General Info aparece:

o Un toolbar en la parte superior con un icono para ir atrás y el nombre del dataset abierto.

o Una tarjeta con el nombre de la sección, los datos del dataset que han sido rellenados con anterioridad por el DR operator.





40 / 69

Test 3 Verificar estructura y enlaces de la página Details











Clic sobre el icono Details en el tag de la parte inferior de la app

La página de Details se abre

Verificar que en la página Details aparece:


o Una tarjeta con el nombre de la sección, campos para rellenar los detalles del orden.





41 / 69

Test 4 Verificar estructura y enlaces de la Documents











Clic sobre el icono Documents en el tag de la parte inferior de la app

La página de Documents se abre

Verificar que en la página Documents aparece:


o Una tarjeta con el nombre de la sección, un botón en la parte inferior para añadir documentos y los documentos e imágenes añadidos.





42 / 69

Test 5 Verificar estructura y enlaces de la página Packaging











Clic sobre el icono Packaging en el tag de la parte inferior de la app

La página de Packaging se abre

Verificar que en la página Packaging aparece:


o Los campos para añadir los tipos de paquetes que vienen.





43 / 69

Test 6 Verificar estructura y enlaces de la página Items




Hacer clic derecho sobre la pantalla del navegador y dar clic sobre inspeccionar







Clic sobre el icono Items en el tag de la parte inferior de la app

La página de Items se abre

Verificar que en la página Items aparece:


o Los ítems declarados por el DR operator y un botón para añadir más ítems que no se han declarado.



Clic sobre un ítem o sobre el botón añadir ítems

Una nueva página se abre con detalle de los ítems

Verificar que en la página Items Details aparece:

o Un toolbar en la parte superior con un icono para ir hacia atrás y el nombre del ítem abierto.

o Una tarjeta con los campos a rellenar del ítem a añadir o a editar.

o Un botón para añadir fotos del ítem a añadir o a editar con las imágenes añadidas.





44 / 69

Test 7 Verificar estructura y enlaces de la página Verification











Clic sobre el icono Verification en el tag de la parte inferior de la app

La página de Verification se abre

Verificar que en la página Verification aparece:

o Un toolbar en la parte superior con un icono para ir atrás y el nombre del dataset abierto

o Una tarjeta con los datos a rellenar sobre la verificación visual de la mercancía inspeccionada

o Tags con iconos de las secciones en la parte inferior de la aplicación




45 / 69

Test 8 Verificar estructura y enlaces de la página Results











Clic sobre el icono Results en el tag de la parte inferior de la app

La página de Result se abre

Verificar que en la página Result aparece:


o Una tarjeta con los campos a rellenar sobre el resultado de la inspección.

o Tags con iconos de las secciones en la parte inferior de la aplicación




46 / 69

Instrucciones de uso

Introducción La aplicación Coview es una aplicación de tipo Web Responsive que adapta su pantalla tanto en

móviles, como en tablets, en el caso de los trabajadores de Coview usarían las tablets como

dispositivo habitual de trabajo, sin embargo, ahora también podrían utilizar móviles.

Coview es una aplicación desarrollada para que los inspectores hagan sus tareas de verificación

y toma de datos durante controles aduaneros. La aplicación solo dispone de la parte Frontend

de la aplicación, por lo tanto, hay funcionalidades que no están implementadas, como añadir

documentos. Los datos se guardarían automáticamente, por eso no existe el botón “guardar”.

Instalación de la aplicación Deberá disponer de un dispositivo móvil o tablet. La aplicación es de tipo web y por lo tanto solo

hará falta introducir la siguiente URL en el buscador: https://tfg-coview.firebaseapp.com/home

https://tfg-coview.firebaseapp.com/home


47 / 69

Pending inspections Después de poner la URL, lo primero que verá será la página principal de la aplicación llamada

“Pending inspections”, donde aparece una lista de los datasets que están listos para ser

inspeccionados. Para iniciar una inspección deberá seleccionar un dataset de la lista.

Esta página contiene:

o Datasets: Los cuales representan los datasets que están listos para ser inspeccionados.

o Buscador: Para buscar un dataset en especial. o Alerta: El cual nos indicará las notificaciones de los datasets que van llegando a la

aplicación del Inspector. o Menú: Menú desplegable con acceso directo al home, settings, about y logout


48 / 69


49 / 69

General Info Al abrir el dataset se mostrará la página de General Info, la cual muestra los detalles y

características de la inspección, que servirán para consultar los datos que antes han sido

registrados por otros operadores.

En la parte inferior podrá ver un menú de iconos, que representan cada parte de la inspección

separada por secciones, dónde podrá acceder haciendo clic sobre el icono de la sección

deseada.


50 / 69

Order details Clicando sobre el segundo icono del menú accederá a la sección de Details, donde podrá rellenar

los campos de los detalles relacionados con la inspección como el lugar de la inspección, nombre

e email del representante del cliente, nombre e email del representante de aduana, la fecha de

llegada y de inicio de la inspección.

Los campos que tienen un (*) son obligatorios.


51 / 69

Attachments Clicando sobre el tercer icono del menú accederá a la sección de Attachments, esta página

representa la sección en la cual se pueden cargar documentos de archivo y tomar fotos de la

inspección.


52 / 69

Packaging Clicando sobre el cuarto icono del menú accederá a la sección de Packaging, en esta área podrá

añadir el número de los tipos de embalaje que ha visto en la inspección, los datos solo son de

tipo numérico para evitar errores.


53 / 69

Items & Discrepancies Clicando sobre el quinto icono del menú accederá a la sección de Items, donde podrá ver los

diferentes ítems que han sido añadidos durante la declaración anteriormente por el DR operator.


54 / 69

Si clica sobre uno de los ítems o sobre el botón de añadir, se abrirá otra página que representa

que podrá editar un ítem declarado o añadir un nuevo ítem que no ha sido declarado, en la parte

inferior derecha podrá añadir fotos relacionadas con ese ítem que está editando o añadiendo.


55 / 69

Si clica sobre el icono de los tres puntos en la parte superior derecha de la aplicación, un Bottom

Sheet se despliega mostrando las opciones que se pueden hacer en el ítem actual, como

archivar, historial o eliminar.


56 / 69

Verification Clicando sobre el sexto icono del menú accederá a la sección de Verification, esta sección

consiste en un simple formulario, donde podrá rellenar diferentes aspectos importantes

relacionados con la verificación visual de la inspección.


57 / 69

Result Clicando sobre el séptimo icono del menú accederá a la sección de Result, esta es la última

sección de la inspección, aquí deberá seleccionar el resultado final de la inspección, añadir un

comentario, fecha de finalización y el total de las horas de la inspección.

Los campos que tienen un (*) son obligatorios.


58 / 69

Findings

Después de haber ejecutado los 8 tests especificados en la entrega anterior, todos y cada uno

de los tests han tenido un resultado satisfactorio, puesto que se han implementado todos los

detalles y características que debía tener la aplicación.

Aunque el resultado de los tests haya sido satisfactorio, se han detectado pequeñas mejoras

para la consistencia y usabilidad de la aplicación.

1. Diferente separación entre elementos a las demás páginas En la página de Item Details, la separación entre el subtítulo y el formulario no es la misma

que las demás páginas de la aplicación.

=


59 / 69

2. El texto del botón está en minúsculas Como uno de los objetivos de este proyecto es que la aplicación refleje la guía de estilo de

Material Design, los textos de los botones deberían estar en mayúsculas.

3. Implementar el componente Speed dial La página de Attachments tiene en la parte inferior derecha un botón flotante para añadir

documentos, el objetivo de este botón debería ser que l seleccionarlo, se debe abrir un Speed

Dial, el cual es un componente de Material Design que nos permitiría elegir adjuntar un

documento desde archivo, adjuntar una imagen desde archivo o tomar una foto directamente

desde el móvil.

=

=


60 / 69

Solución de findings

1. Todos los elementos tienen la misma separación La sección de Item details ya tiene la misma separación que las demás secciones.

2. El texto del botón está en mayúsculas


61 / 69

3. El componente Speed Dial ha sido implementado Al clicar sobre el botón de añadir, se despliega una serie de botones para adjuntar documentos, vídeos, imágenes o tomar una foto directamente.


62 / 69

Proyección a futuro

Presentar el proyecto a la empresa Coview se trata de una aplicación existente que está en uso por los inspectores de algunos

países. Sin embargo, como hemos visto en el análisis heurístico, la aplicación tiene varios

problemas detectados, a los cuales he intentado dar solución. Por lo tanto, como proyección a

futuro y siendo uno de mis objetivos del proyecto, presentaré los Mockups interactivos que son

los mismos que la parte Frontend de la nueva aplicación a la representante de la parte visual de

la empresa que se encuentra en Ginebra.

Implementar el nuevo diseño en una aplicación real En el caso de que Cotecna esté interesada en implementar el diseño Frontend desarrollado para

reemplazar la aplicación actual, Cotecna ya dispone del Backend de la aplicación, por lo tanto,

solo debería hacer la unión de ambas.


63 / 69

Presupuesto

Equipo humano Perfil Tareas Días Coste x

día Total

Arquitecto Diseño de la estructura de la aplicación 4 400€ 1.600€

Diseñador UX/UI

Diseño de la usabilidad y las interfaces de la nueva aplicación basado en Material Design.

7 270€ 1.890€

Diseñador gráfico

Diseño visual de la aplicación, elección de tipografía, colores, etc.

3 230€ 690€

Programador Frontend

Programación con Angular de la parte Frontend de la aplicación.

18 320€ 5.760€

Tester Creación de casos de prueba, ejecución de pruebas, reporte de bugs y verificación de estos.

6 280€ 1.680€

Jefe de proyecto

Dirección y gestión de recursos y tiempo del proyecto.

9 480€ 4.320€

Jefe de producto

Creación de requerimientos y seguimiento del cumplimiento de estos.

6 400€ 2.400€

Total 18.340€

Equipo técnico Equipo Especificaciones Coste

Ordenadores Equipos para cada uno de los perfiles, aptos para tareas de desarrollo y proyectos de diseño, con amplia capacidad, procesador rápido y pantalla apta para el diseño

4.800€

Licencias Licencias para herramientas de desarrollo, repositorio, testing, diseño y gestión.

550€

Alojamiento web Pago del alojamiento del sitio web por mes 10€ x mes

Dominio web Pago del nombre del dominio web 28€

Total 5.578


64 / 69

Conclusiones

No dar importancia al diseño de interfaces y usabilidad de una aplicación antes de empezar a

desarrollar el producto, puede traer malas consecuencias en el futuro.

Sin embargo, no en todas las aplicaciones se ha tenido en cuenta un diseño usable y atractivo,

como es el caso de la aplicación en la cual participo en mis prácticas, la cual es una aplicación

que sirve para introducir los datos recogidos durante las inspecciones. Debido a que la aplicación

es poco usable, decidí analizar los puntos a mejorar, con el fin de crear un producto que pudiera

satisfacer las necesidades del usuario.

Crear los diferentes perfiles de usuario me ayudó a entender sus necesidades, hacer un análisis

heurístico de la aplicación me ayudó a detectar las inconsistencias de la aplicación y estudiar las

guías de Material Design me dio un conocimiento actual de guías de diseño.

Conocer la aplicación actual, me dio una visión general de las partes imprescindibles que debía

contener la nueva aplicación y junto con los resultados de los análisis descritos con anterioridad,

diseñé los Wireframes adaptados a una vista móvil, puesto que los usuarios utilizan tablets para

hacer las inspecciones.

Los Wireframes sirvieron como pauta para desarrollar la parte Frontend de la aplicación, la cual

fue programada para que sea adaptable para tablets y móviles.

Tanto la investigación, como el proyecto demuestran que la aplicación ha podido mejorar muchos

aspectos, tanto visuales como funcionales. Ahora la aplicación utiliza las guías de estilo de la

marca, cumple con los estándares, tiene un diseño moderno basado en Material Design, es

intuitiva y utiliza gestos móviles para simplificar las acciones de los usuarios.

Después de mostrar el proyecto a la empresa, ¿Decidirán utilizar el nuevo diseño para cambiar

la aplicación actual?


65 / 69

Anexos

Anexo 1: Evaluación heurística Este documento contiene el análisis heurístico de la aplicación actual Coview.

Anexo 2: Prototipos LO-FI Esta carpeta contiene los prototipos de tipo LO-FI, prototipos de poco nivel de detalle, los cuales

son los Wireframes del diseño de la aplicación.

Anexo 3: Prototipos HI-FI Esta carpeta contiene los prototipos de tipo HI-FI, prototipos de más calidad y nivel de detalle,

los cuales son los Mockups de la aplicación.

Anexo 4: Código de la parte Frontend de la aplicación En esta carpeta se encuentra la parte Frontend de la aplicación.

Anexo 5: Bibliografía

Anexo 6: Vita


66 / 69

Bibliografía

Material Design [En línea] Google. [Fecha de consulta: 19 de septiembre del 2018]. Disponible

en: https://material.io/

Cotecna [En línea] Cotecna Inspección [Fecha de consulta: 19 de septiembre del 2018].

Disponible en: https://www.cotecna.com/es

Material Design [En línea] UOC Grado Multimedia. [Fecha de consulta: 19 de septiembre del

2018]. Disponible en: http://multimedia.uoc.edu/blogs/dii/es/tendencies/material-design/

Diseño centrado en el usuario: Conceptos básicos [En línea] UOC Grado Multimedia [Fecha de

consulta 19 de septiembre del 2018]. Disponible en:

http://multimedia.uoc.edu/blogs/fem/es/diseno-centrado-en-el-usuario-conceptos-basicos/

Interacción y patrones [En línea] App Design Book [Fecha de consulta: 19 de septiembre del

2018]. Disponible en: http://appdesignbook.com/es/contenidos/patrones-interaccion-moviles/

Cómo definir los perfiles de usuario de un sitio web [En línea] Humanlevel. [Fecha de consulta:

22 de septiembre del 2018]. Disponible en:

https://www.humanlevel.com/articulos/usabilidad/como-definir-los-perfiles-de-usuario-de-un-sitio-web.html

Diseño web centrado en el usuario: Usabilidad y arquitectura de la información [En línea] UPF.

[Fecha de consulta: 22 de septiembre del 2018]. Disponible en:

https://www.upf.edu/hipertextnet/numero-2/diseno_web.html

10 reglas heurísticas de usabilidad de Jakob Nielsen [En línea] Braintive. [Fecha de consulta: 15

de octubre del 2018]. Disponible en: http://www.braintive.com/10-reglas-heuristicas-de-usabilidad-de-jakob-nielsen/

Recursos sobre evaluación heurística [En línea] Saraclip. [Fecha de consulta: 15 de octubre del

2018]. Disponible en: https://www.saraclip.com/recursos-sobre-evaluacion-heuristica/

Wireframes: Qué son y como crearlos [En línea] Webdesdecero. [Fecha de consulta: 22 de

octubre del 2018]. Disponible en: https://webdesdecero.com/Wireframes-que-son-y-como-crearlos/

Shrine theming [En línea]. Google. [Fecha de consulta: 1 de noviembre del 2018]. Disponible en:

https://material.io/design/material-studies/shrine.html#motion

https://material.io/

https://www.cotecna.com/es

http://multimedia.uoc.edu/blogs/dii/es/tendencies/material-design/



http://appdesignbook.com/es/contenidos/patrones-interaccion-moviles/

http://appdesignbook.com/es/contenidos/patrones-interaccion-moviles/



https://www.upf.edu/hipertextnet/numero-2/diseno_web.html

http://www.braintive.com/10-reglas-heuristicas-de-usabilidad-de-jakob-nielsen/

http://www.braintive.com/10-reglas-heuristicas-de-usabilidad-de-jakob-nielsen/

https://www.saraclip.com/recursos-sobre-evaluacion-heuristica/

https://webdesdecero.com/wireframes-que-son-y-como-crearlos/

https://webdesdecero.com/wireframes-que-son-y-como-crearlos/

https://material.io/design/material-studies/shrine.html#motion


67 / 69

Crane theming [En línea]. Google. [Fecha de consulta: 1 de noviembre del 2018]. Disponible en:

https://material.io/design/material-studies/crane.html

Tutorial Angular Material – Qué es y cómo usar los componentes Material Design [En línea]

Frostqui. [Fecha de consulta: 4 de noviembre del 2018]. Disponible en:

https://frostqui.github.io/angular-material

Los 5 patrones del Responsive Design con Flexbox [En línea] Carlos Zaustre. [Fecha de consulta:

4 de noviembre del 2018]. Disponible en: https://carlosazaustre.es/los-5-patrones-del-responsive-design/

A complete guide to Flexbox [En línea] Css tricks. [Fecha de consulta: 4 de noviembre del 2018].

Disponible en: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Angular Material [En línea] Angular. [Fecha de consulta: 4 de noviembre del 2018]. Disponible

en: https://material.angular.io/

Iconos [En línea]. Google. [Fecha de consulta: 4 de noviembre del 2018]. Disponible en:

https://material.io/tools/icons/?style=baseline

Pruebas de software [En línea] Wikipedia. [Fecha de consulta: 29 de noviembre del 2018].

Disponible en: https://es.wikipedia.org/wiki/Pruebas_de_software

Cómo escribir una conclusión para una investigación [En línea] Wikihow. [Fecha de consulta: 21

de diciembre del 2018]. Disponible en: https://es.wikihow.com/escribir-una-conclusi%C3%B3n-para-una-investigaci%C3%B3n

https://material.io/design/material-studies/crane.html

https://frostqui.github.io/angular-material

https://carlosazaustre.es/los-5-patrones-del-responsive-design/

https://carlosazaustre.es/los-5-patrones-del-responsive-design/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://material.angular.io/

https://material.io/tools/icons/?style=baseline

https://es.wikipedia.org/wiki/Pruebas_de_software

https://es.wikihow.com/escribir-una-conclusi%C3%B3n-para-una-investigaci%C3%B3n

https://es.wikihow.com/escribir-una-conclusi%C3%B3n-para-una-investigaci%C3%B3n


68 / 69

Vita

Soy Denisse Gomez y estoy finalizando el Grado de Multimedia en la UOC. Anteriormente he

finalizado estudios relacionados con Arquitectura, y también estudios de Interiorismo.

Finalmente, decidí cambiarme al ramo de la tecnología a través del Grado de Multimedia.

Disfruto mucho del diseño y del uso de las nuevas tecnologías. Siento curiosidad por:

o Las mejores prácticas de usabilidad y las guías actuales de diseño.

o Por el Frontend y el desarrollo móvil híbrido.

o Y por el testing y la automatización.

Todas estas cosas determinan mi orientación absoluta a Producto: desde su apariencia y

usabilidad, pasando por las tecnologías que usan, así como sus requerimientos y casos de uso

y las pruebas que cubrirán los mismos para garantizar la calidad de éste.

He hecho prácticas de Frontend durante el Grado en Bayer, no vinculada al desarrollo de

aplicaciones sino al Marketing. Posteriormente continué mis prácticas en Cotecna, una empresa

Suiza dedicada a las Inspecciones, en la que participé en la calidad de una aplicación

multiplataforma conectada a grandes escáneres en los puertos. Tras esas prácticas, pasé a

formar parte de la plantilla y actualmente continúo en el mismo proyecto.