Imagen abstracta de una mujer sentada en libros y estudiando en una computadora portátil

Diseño de interfaces de usuario y experiencia de usuario

G
GermanACATOCAIZA

El proyecto se centra en el diseño UI/UX de una aplicación para Android que gestiona accesos a través de un sistema inteligente, mejorando un prototipo existente. Se plantea una metodología centrada en el usuario y se llevan a cabo diversas técnicas de investigación para optimizar la usabilidad y funcionalidad de la aplicación. El objetivo es crear una herramienta accesible que ofrezca un control efectivo sobre los accesos a propiedades, con implicaciones significativas en la domótica y la seguridad del hogar.

Educación
1 de 100
Descargar para leer sin conexión
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
DISEÑO UI/UX DE APLICACIÓN PARA CONTROL DE ACCESOS UNIVERSITAT OBERTA DE CATALUNYA Grado Diseño y Creaciones Digitales Trabajo Final de Grado HELENA CALVA ORIA 2020/2021
Diseño de interfaces de usuario y experiencia de usuario
3 ÍNDICE 1. Introducción……………………………………………......................................... a. Contexto........……………………………….…….…........................................... b. Descripción……………………………………….…….…..................................... c. Definición…………………………………………................................................ d.Justificación…………………………………………............................................ e.Hipótesis…………………………………………………....….................................. f. Objetivo……………………………………………….….......................................... g.Palabras clave…………….........................……………………......................... h. Abstract................................................................................................... 2.Planificación……………………………………….....................................…….... a. Herramientas .......................................................…...………….….…....... b. DAFO………………………………………..………….................................………... c. Tabla de Recursos…………………………………….......................…..………... d. Diagrama de Gantt……………………………………………............................ e. Timing…………………….............................………………………………………… 3.Metodología……………………………………….....................................……..... a. Técnicas………………………………………………….……................................... b.Metodología…....................…………………………….……....................…...... c.Validación................................……………………………………...................... 4.Investigación……………………………………….....................................……... a. Antecedentes: Usabilidad y experiencia de usuario………….......... b. Fundamentos del diseño en móviles………………………….................. c. Tendencias de diseño actuales………………………………....................... 5. Desarrollo del proyecto…………………………...............……….................... a. Investigación………………………………………………….…............................. i. Entrevista a usuarios................................................................. ii. Benchmarking..................………………….......………………...……… iii. Card Sorting..…………………………………...................................... iv. Propuesta de valor………………………........................................ b. Customer journey map………………...................................................... c. Buyer Persona………………………………………………...........................…..... d. Personas……….………………………………………….............................……….. e. Escenarios ………………………………………….............................…………….. f.Briefing……………………………………………..……………................................. 7 8 9 10 11 13 14 15 16 17 18 19 20 21 22 23 24 25 26 31 32 33 39 40 41 43 45 51 52 54 55 57 58 60
4 6. Diseño interfaz…………....…………………………………….............................. a.Funcionalidades..…………………………………………………..................…….. b. Flujos de interacción.…………………………………………................……..... c. Árbol de contenidos…………………………………………….…....................... d. Wireframe............................…………………………………………………………. e. Características interfaz final.............................................................. i. Tipografía.……………………..…….....................………….…............... ii. Copy .………………..…..………………................................................. iii. Gama Cromática......……………………..…….....................………… iv.Layout.….......................……………..…..………………....................... v.Botones......................………………..…..………………........................ vi.Iconografía................................................................................. vii. Icon App.................................................................................... f. Prototipo................................…………………………………...…….................. 7.Evaluación…………………………………………….............................…...………. a. Evaluación Heurística….………………………………….....................…….… b. Test de Usuarios…………………………………………………........................... i. Estructura del test.……………………..…….....................………….… ii. Resultados del test.………………..…..……………….....................… 1. Uso libre de la aplicación..…….…………................…….… 2. Tareas específicas ....…..…………………….….................... 3. Cuestionario final ..…..…………...………….................….… 8. Conclusiones..…………...………………………...............………….................... 9. Figuras..................................................................................................... 10. Bibliografía.……………………………………………………............................... 61 62 63 65 66 67 68 69 70 71 72 73 74 75 78 80 86 87 88 89 90 91 92 95 97
5 Diseño IU para aplicación móvil Helena Calva Oria
“Reconocer una necesidad es la primera condición para comenzar a diseñar”. Charles Eames
7 Diseño IU para aplicación móvil Helena Calva Oria 1 INTRODUCCIÓN INTRODUCCIÓN INTRODUCCIÓN
8 Diseño IU para aplicación móvil Helena Calva Oria CONTEXTO a. CONTEXTO La tecnología ha sufrido un rápido avance en los últimos años, estando presente en prácticamente cualquier ámbito de la sociedad. Actualmente, se busca optimizar tiempos. Consumimos más rápido, nos desplazamos más rápido y, en definitiva, buscamos experiencias que nos permitan perder menos tiempo en asuntos que no nos atraen para poder dedicarnos a lo que real- mente nos interesa. Durante los últimos años, los smartphones han cambiado nues- tra forma de relacionarnos: ya no usamos el teléfono móvil solo para hablar, sino que también nos man- tenemos conectados a través de las redes sociales, lo utilizamos como cámara de fotos, reproductor de música, GPS, tarjeta bancaria... El avance de la tecnología durante las últimas décadas es un factor que ha permitido evolucionar de forma vertiginosa a la sociedad, propor- cionando soluciones inimaginables. ¿Quién creía hace 20 años que desde un móvil podríamos controlar lo que ocurre en nuestro domicilio? El mercado de las casas inteligentes, está creciendo un 25% cada año a nivel global, con los sistemas de acceso como máximo exponente [1]. La evolución del internet de las cosas (IoT)1 es una nueva revolución tec- nológica y los smartHome podrán facilitarnos más aún el día a día en los próximos años. 1 Abreviación del inglés Internet of things. El término IoT hace referencia a los sistemas de dispositivos físicos que reciben y transfieren datos a través de redes inalámbricas sin la intervención humana.
9 Diseño IU para aplicación móvil Helena Calva Oria DESCRIPCIÓN b. DESCRIPCIÓN Este proyecto consiste en el dise- ño UI/UX de un producto avanzado de aplicación para dispositivos con sistema operativo Android que faci- lite la gestión de diferentes accesos, permisos y comunicaciones. La motivación principal es desarro- llar una nueva versión de esta apli- cación para mejorar el prototipo que actualmente se ofrece, junto con un dispositivo con el que funciona: un smart intercom que permite abrir el portal, la puerta de tu casa, el garaje, un local…
10 Diseño IU para aplicación móvil Helena Calva Oria DEFINICIÓN c. DEFINICIÓN La aplicación a desarrollar permi- tirá que, como propietario, se cree una cuenta con las distintas puertas a administrar y se pueda gestionar la apertura de distintos accesos con este único mecanismo. También controlar quién y cuándo entra en el domicilio, pudiendo dar permisos temporales, ya sea por horas o por periodos. Además, si alguien toca el timbre y nadie se encuentra en casa, se recibirá una llamada o una notifi- cación en el smartphone, y se podrá abrir desde el móvil como si el usua- rio estuviera en el domicilio.
11 Diseño IU para aplicación móvil Helena Calva Oria JUSTIFICACIÓN d. JUSTIFICACIÓN Tras comprobar el creciente interés de los usuarios en este tipo de pro- ducto, y observando las carencias existentes en la oferta actual, se ha decidido desarrollar uno propio que aúne todos los posibles requeri- mientos de los usuarios y, aunque otras marcas ya están comerciali- zando su producto, se ofrece una solución centralizada única. Elaborar esta propuesta busca alcanzar que el producto final obte- nido sea de la suficiente consistencia y calidad como para salir al mercado a gran escala, ya que actualmente se está testeando en fase beta. Es decir, se busca cómo objetivo profesionali- zar la aplicación. De esta forma, se optimiza un pro- yecto personal que se lleva desarro- llando desde hace un par de años. La intención es mejorar la propuesta actual, ya que el producto está en el mercado (betatester), pero se espe- ra vender a gran escala. Para ello es necesario optimizarlo al máximo (y en un futuro a corto plazo crear la versión IOS). Esta es una gran oportunidad para realizar un enorme avance en el pro- ducto, ya que conseguir un resultado satisfactorio significa poder comen- zar a obtener mayores beneficios económicos. A día de hoy, se estima que habrá entre 40 y 50 mil millones de dispo- sitivos conectados a Internet. La hiperconectividad llevada a cifras como las que manejan las consulto- ras, aportando los siguientes datos: - General Electric prevé que la inversión en el Internet de Cosas (IoT), alcance los 60 billones de dólares durante los próximos 15 años. - McKinsey estima que el tamaño total del mercado de IoT en 2015 fue de hasta 900 millones de dóla- res, creciendo hasta los 3,7 billones en 2020 [2]. Partiendo de esta base, donde la domótica está creciendo exponen- cialmente en los últimos años, el fin es poder democratizar esta tec- nología, ofreciendo productos de calidad a un precio accesible. Esta aplicación, junto con el aparato que controla, pretende ser un primer dispositivo IoT que ayude a financiar el desarrollo de los siguientes. El impacto social que puede tener el avance y acceso a este producto es beneficioso tanto en términos particulares (hábitat mejorado, seguridad, sostenibilidad gracias a la eficiencia energética...) como en el aspecto laboral (aumento de
12 Diseño IU para aplicación móvil Helena Calva Oria productividad gracias a la automa- tización, optimización de recursos, reducción de costes, mayor seguri- dad, ...). La capacidad de obtención de datos continuos con sensores inteligen- tes permite actualmente que el IoT facilite tomar decisiones, o incluso realizar acciones como inyectar la cantidad adecuada de insulina a un paciente en un momento determi- nado [3], lo que abre un amplio aba- nico de posibilidades, por ejemplo, en el sector de la salud. Finalmente, destacar que la expo- sición tiene más relevancia al cen- trarse en la realización de un diseño propio y con futuro, como es el caso, y no en un prototipo ficticio. Es por ello que en este proyecto se pondrá en práctica la mayor cantidad de conocimiento posible para mejorarlo al máximo.
13 Diseño IU para aplicación móvil Helena Calva Oria HIPÓTESIS e. HIPÓTESIS Como la domótica está ganando mercado, la hipótesis se basa en diseñar una aplicación móvil para sistema android, ya que ninguna empresa actual ofrece tantas fun- cionalidades agrupadas que permi- ta al usuario realizar las siguientes opciones desde una sola interfaz: - Gestionar la apertura de distintos accesos con este único mecanismo. Controlar quién y cuándo entra en el domicilio. - Dar permisos temporales (ya sea por horas o por periodos). - Recibir una llamada o una notifi- cación si tocan el timbre de casa y no estás. Estas son solo las opciones para particulares, ya que el target inicial son los propietarios de viviendas, sin embargo (y debido a su flexibilidad y adaptación), también podrán usar la aplicación empresas de alquiler de instalaciones deportivas, espacios de coworking, pisos vacacionales, res- taurantes y hoteles, así como cual- quier negocio que necesite un regis- tro de la jornada laboral ordinaria en su empresa, obligatorio desde el 12 de mayo de 2019 y aprobado en el Real Decreto Ley 8/20192 ,1 que modifica el artículo 34 del Estatuto del Trabajador, añadiendo el apartado 9. 2 https://www.boe.es/eli/es/rdl/2019/03/08/8
14 Diseño IU para aplicación móvil Helena Calva Oria OBJETIVO f. OBJETIVO Se quiere conseguir aunar todas las funcionalidades ofrecidas por el producto en una aplicación completa y a su vez de uso sencillo, crean- do una estructura intuitiva para el usuario de la aplicación. Para lograrlo, los objetivos específi- cos en este proyecto son: - Reunir los conocimientos teóricos y prácticos adquiridos durante el grado de Diseño y Creación Digita- les y reflejarlos en el desarrollo del trabajo. - Aplicar las técnicas de Diseño Cen- trado en el Usuario para garantizar una óptima experiencia de usuario y comprobar la usabilidad en el pro- ducto a diseñar. - Adquirir nuevos conocimientos y experiencia sobre el diseño de UX en una aplicación. - Realizar una aplicación final de calidad. En este aspecto, el estudio se basa en los diseños de interfaz de dis- positivos de la competencia, que ya existen en el mercado pero que no reúnen todas las opciones que se quieren ofrecer.
15 Diseño IU para aplicación móvil Helena Calva Oria PALABRAS CLAVE g. PALABRAS CLAVE Aplicación Android Diseño Interfaz de usuario Experiencia de usuario Usabilidad Smartphone IoT Smarthome Interacción
16 Diseño IU para aplicación móvil Helena Calva Oria ABSTRACT h. ABSTRACT This project consists of the UI / UX design of an advanced application product for devices with Android operating system that facilitates the management of different accesses, permissions and communications. The main motivation is to develop a new version of this application to improve the prototype that is currently offered, together with a device with which it works: an inte- lligent intercom that allows you to open the portal, the door of your house, the garage, a room ...
17 Diseño IU para aplicación móvil Helena Calva Oria 2 PLANIFICACIÓN PLANIFICACIÓN PLANIFICACIÓN
18 Diseño IU para aplicación móvil Helena Calva Oria HERRAMIENTAS a. HERRAMIENTAS Para la planificación del proyecto se emplearán diferentes herramientas que ayudarán a desarrollar cada fase en un tiempo concreto, evitando la dispersión y optimizando el resultado. Inicialmente se creará un Diagrama de Gantt para controlar los tiem- pos, permitiendo así realizar un seguimiento de las diferentes etapas que tendrá el proyecto. Se intentará ajustar las etapas a la metodología y definir los timings, pero como se trata de un sistema ‘vivo’ y en desa- rrollo constante, se irá actualizando a medida que se vayan adelantando tareas, marcando hitos o añadiendo nuevos objetivos. Se emplearán en dos herramientas distintas: una será Monday.com, ya que permite recibir alertas por cada hito de cada fase; y officetimeline. com, recurso online con el que se diseñará el planning road map de una forma más visual, que permi- te ver la estructura y las fases de un solo vistazo. También se hará uso de Marvel App como herramienta de validación. De esta forma, al animar los wire- frames, la validación la harán los propios usuarios mediante un pro- totipo navegable. Para mantener acceso a los conteni- dos desde cualquier dispositivo con internet, la herramienta de Google Drive será el backup. Tambíen se realizará una encuesta a través de un formulario de Google Forms. Para aplicar la imagen la línea gráfi- ca a la aplicación se utilizará Adobe, principalmente Illustrator. Del mismo modo, el software con el que se montará el vídeo de la defensa final del proyecto será Premier, y la maquetación del documento final se realizará con InDesign.
19 Diseño IU para aplicación móvil Helena Calva Oria DAFO b. DAFO El análisis DAFO es una herramienta que forma parte del análisis estraté- gico de una compañía. Este análisis se basa en identificar y clasificar distintos factores, tanto internos como externos a la empresa, para poder ofrecer una visión global de la compañía. Sus siglas significan Debilidades, Amenazas, Fortalezas y Oportunida- des. Las debilidades y fortalezas son componentes internos de la com- pañía, mientras que las amenazas y oportunidades son factores externos. Figura 1
20 Diseño IU para aplicación móvil Helena Calva Oria TABLA RECURSOS c. TABLA DE RECURSOS Figura 2
21 Diseño IU para aplicación móvil Helena Calva Oria DIAGRAMAGANTT e. DIAGRAMA DE GANTT Figura 3
22 Diseño IU para aplicación móvil Helena Calva Oria TIMING f. TIMING Figura 4
23 Diseño IU para aplicación móvil Helena Calva Oria 3 METODOLOGÍA METODOLOGÍA METODOLOGÍA
24 Diseño IU para aplicación móvil Helena Calva Oria TÉCNICAS a. TÉCNICAS Puesto que se trata de un proyec- to que se ha de desarrollar en un periodo concreto de tiempo, se busca organizar los hitos con el uso de metodologías ágiles que permi- tan la optimización del proyecto de forma incremental. De esta forma, se obtienen versiones del prototipo más completas en cada avance, y permite analizar los resultados para mejorar en las siguientes fases. Figura 5 Se tendrá especial atención al entorno, por lo que se analizará a los usuarios para poder definir mejor los problemas que se encuentran al utilizar el diseño original, y se plan- tearán preguntas adecuadas que faciliten generar soluciones. Esto será plasmado en un briefing.1 3 El briefing es un documento informativo que brinda datos de utilidad para el desarrollo de una acción. sirve como punto de partida para una tarea.
25 Diseño IU para aplicación móvil Helena Calva Oria El proceso se focaliza en la meto- dología del Diseño Centrado en el Usuario (DCU)42 y el Design Thin- king5,3 realizando un mix de ambas modalidades para perfilar la aplica- ción de forma más eficaz. Inicialmente, se utilizará el proceso de Design Thinking, ya que comien- za con una etapa de información y comprensión, identificando las necesidades de los usuarios (perso- nas tipo) implicados en la solución que se quiere desarrollar. 1.Empatizar. A través de un estudio de mercado se realiza un análisis del cliente, detectando las principales necesidades del consumidor y com- prendiendo sus motivaciones. Para llevar a cabo esta exploración, hay interacción con el usuario a través de una encuesta. 2. Definir. Tras el estudio inicial, se definen cuáles son las necesidades del usuario, evaluando los posibles problemas detectados previamente. Al determinar las principales necesi- dades, se plantean las medidas para llegar a la solución definitiva. 4 El DCU es un término general para una filosofía y unos métodos que se centran en “diseñar para”, e invo- lucrar a usuarios en el diseño de sistemas informáticos. Consta de 6 sujetos que participan en el estudio y dichos usuarios pueden participar de distintas formas. 5 Design Thinking, en español, pensamiento de diseño, es una metodología o proceso que permite o facilita la solución de problemas, el diseño y desarrollo de productos y servicios de todo tipo y sectores, utilizando para ello la motivación, la innovación y creatividad como motores. 3. Idear. A través del pensamiento creativo, se trata de lanzar más de una idea para solucionar los proble- mas específicos que se identificaron en la fase previa. En este proceso de pensamiento divergente está permi- tido equivocarse, utilizando el pen- samiento libre. 4. Prototipar. Materializar las ideas seleccionadas. El prototipo se rea- lizará con materiales de bajo coste, creando un wireframe inicialmente. 5. Evaluar. Los clientes probarán y evaluarán el prototipo elaborado anteriormente. En base a sus impre- siones, se podrá deber hacer correc- ciones. Esta es la etapa de valida- ción crucial para descubrir errores y aciertos. Para complementar y perfeccionar el desarrollo, se une a este método de trabajo el Diseño Centrado en el Usuario, cuyas etapas generales de proceso son Indagación, Diseño y Evaluación, creando de esta forma un mix completo. La siguiente figura presenta los principales métodos agrupados según un proceso clásico del DCU: investigación y requisitos de usuario para definir el producto y su dise- ño, la creación y el desarrollo de la arquitectura de información y las maquetas, y la evaluación de los elementos diseñados.
26 Diseño IU para aplicación móvil Helena Calva Oria Figura 6 Para crear el DCU del proyecto se han definido las siguientes etapas: 1. Investigación: Se realizará un aná- lisis comparativo y encuestas. Es la etapa donde se empatiza con el usuario. 2. Definición: Se crearán “personas tipo” para representar a los potencia- les usuarios. 3. Ideación: En base a los usuarios definidos, se describirán los objetivos y elementos clave que deberán estar presentes en el prototipo a diseñar. 4. Prototipado: Se definirá la arqui- tectura de la información y se elabora- rán los diagramas de flujos. Posteriormente se diseñarán wirefra- mes y prototipos navegables para ser testeados. 5. Validación: Se llevarán a cabo tests con usuarios reales para identificar problemas y extraer resultados que verifiquen el éxito del prototipo. Planificación
27 Diseño IU para aplicación móvil Helena Calva Oria 6. Diseño visual: Finalmente, se aplicará el estilo visual al prototipo. Como se puede comprobar, ambos sistemas tienen puntos en común, por lo que el mix de ambos permite generar un resultado más optimizado.
28 Diseño IU para aplicación móvil Helena Calva Oria METODOLOGÍA b. METODOLOGÍA Para optimizar el progreso del pro- yecto se utilizará el desarrollo itera- tivo e incremental, de esta forma se obtendrán versiones evolutivas del prototipo cada vez más completas, con resultados que permitirán anali- zar y mejorar las siguientes fases. Figura 7
29 Diseño IU para aplicación móvil Helena Calva Oria Además, a través de las metodolo- gías se contará con la participación de usuarios para el diseño y testeo de la aplicación. Esta conjunción ofrece como resultado una versión incre- mentada del producto que está en construcción. Esta metodología ayudará a planifi- car las acciones que se deben realizar en cada momento y está compues- ta por una serie de fases de diseño. Como se muestra en la figura 7, estas etapas no se realizan de forma sucesiva, sino que son iterativas y, conforme se vaya avanzando en el trabajo, se puede regresar a la fase anterior las veces que sea necesario, hasta que se pueda asegurar que el resultado final obtenido se corres- ponde con el objetivo de proporcio- nar la mejor experiencia de usuario.
30 Diseño IU para aplicación móvil Helena Calva Oria VALIDACIÓN c. VALIDACIÓN Tras el estudio inicial, se efectuarán una serie de preguntas a distintos perfiles de usuarios a través de una encuesta. Esta se realizará preferi- blemente cara a cara, para detectar las necesidades del usuario. La validación la realizarán los pro- pios usuarios en los que participa- rán en una interacción de uso. Estas pruebas se realizarán utilizando Marvel App, donde se generará un prototipo navegable y testable. Una vez realizada la comprobación, se utilizará el feedback de los usuarios para redefinir la interfaz a través del sistema Card Sorting de la plataforma optimalworkshop.com, que permitirá generar el diseño final.
31 Diseño IU para aplicación móvil Helena Calva Oria 4 INVESTIGACIÓN INVESTIGACIÓN INVESTIGACIÓN
32 Diseño IU para aplicación móvil Helena Calva Oria ANTECEDENTES a. ANTECEDENTES La primera aparición de un desa- rrollo de Interfaz Gráfica de Usua- rio (GUI) fue gracias a Xerox PARC en 1970. Es Bob Taylor (psicólogo e ingeniero) el pionero en aplicar los criterios de «Diseño centrado en el usuario», para la formación de los productos tales como el Mouse, los Checkbox, los Radiobutton, la Inter- faz Gráfica GUI, entre otros [4]. En 1983, Donald A. Norman, profe- sor de la Northwestern University y cofundador de Nielsen Norman Group, comienza a utilizar el tér- mino User Centered System Design. Observaba cómo la gente usaba los sistemas y creaba sus propios mode- los mentales a partir de los procesos de interacción. Tres eran los térmi- nos que debían ser valorados para entender estos procesos: El modelo conceptual (ofrecido por el diseña- dor del sistema); interfaz (la imagen que el sistema presenta al usuario); y el modelo mental (desarrollado por el usuario a partir de la imagen). Esta fase es una de las más impor- tante del proceso, ya que establecerá las bases sobre las que se va a reali- zar el diseño del producto final, en este caso el prototipo de una apli- cación para dispositivos móviles Android. Según la planificación establecida, se inicia este apartado analizando los fundamentos del diseño móvil, y en concreto la interfaz de los dispo- sitivos para los que se va a desarro- llar el producto. A continuación, se ejecutará un estudio de aplicaciones con carac- terísticas y funcionalidades simi- lares a la nuestra (benchmarking). Se analizará, entre otros elementos, sus funcionalidades, su facilidad de uso, la interacción con el usuario o el coste de la aplicación, para pos- teriormente establecer las caracte- rísticas iniciales que se desean en la nueva aplicación. Por último, se hará un test de usua- rios para valorar el contexto de uso de este tipo de herramienta.
33 Diseño IU para aplicación móvil Helena Calva Oria FUNDAMENTOS b. FUNDAMENTOS A diferencia del diseño de aplicacio- nes para ordenadores personales, en los que existe la posibilidad de inte- ractuar desde diferentes periféricos de entrada, como teclado (mediante lenguaje escrito, códigos y coman- dos) o ratón (mediante el movi- miento de un puntero), los disposi- tivos táctiles ofrecen una interacción más directa, sin dispositivo inter- medio, ya que el usuario se relaciona directamente con el contenido. Este enfoque diferente, se puede resumir en la frase: “Diseñar para tocar”. Para la realización del diseño de este tipo de aplicaciones móviles, es nece- sario tener en cuenta las siguientes limitaciones: Tamaño de elementos: Al desarro- llar una aplicación para smartphones, que son dispositivos táctiles donde la acción central del usuario será la de tocar la pantalla del dispositivo e inte- ractuar con él, se ha de considerar de especial importancia respetar el tama- ño de los elementos que se diseñen y tener en cuenta el mínimo sobre el que se tiene constancia del que pueden surgir problemas. Figura 8 En la figura 8 se pueden ver los tamaños promedio que se sugiere respetar en el diseño de interfaces. Se recomienda que las zonas tácti- les tengan 9mm para que se pueda producir una acción segura, es decir, que se lleve a cabo sin error la acción que el usuario quiere provocar en la pulsación de la pantalla con el dedo.
34 Diseño IU para aplicación móvil Helena Calva Oria En caso que no sea posible por temas de espacio, se recomienda que míni- mo la zona táctil sea de 7 mm, aun- que puede haber casos en los que sea imposible introducir zonas táctiles de ese tamaño, por lo que sólo en casos excepcionales en los que no haya espacio suficiente sea aconse- jable la utilización de una zona táctil de 5 mm. Es importante tener en cuenta que el espacio mínimo entre zonas táctiles sea siempre de 2mm, es decir, en todos los casos anteriormente mencionados. Figura 9 En la figura 9 se observan datos similares en otra medida, más indi- cada a la hora de diseñar en alta fidelidad. Se recomienda crear con- troles que midan al menos 44x44 puntos para que puedan ser pulsados eficientemente con un dedo.
35 Diseño IU para aplicación móvil Helena Calva Oria A continuación, esta gráfica de Microsoft demuestra la importan- cia de los tamaños, ya que muestra como el porcentaje de fallos en la interacción con elementos de menos de 5mm sube exponencialmente. Figura 10 En el caso específico de la aplicación que se va a desarrollar, se tiene en cuenta que el público objetivo al que va dirigida son personas habituadas al uso diario de este tipo de disposi- tivos, por lo que se da por supuesto que tienen adquiridas las destrezas necesarias para un uso normal de la interfaz.
36 Diseño IU para aplicación móvil Helena Calva Oria Figura 11
37 Diseño IU para aplicación móvil Helena Calva Oria Zonas de interacción: Es importan- te además tener en cuenta la forma en la que cogemos el móvil, ya que puede condicionar totalmente el diseño de nuestra interfaz. Según un estudio [6] realizado sobre 1.333 personas en 2013 el 49% de ellas lo utiliza habitualmente con una sola mano. Si analizamos esta forma de utilización, nos damos cuenta de que damos la posibilidad de acción tan sólo al dedo pulgar. Figura 12 Esta figura muestra las zonas de interacción del dedo pulgar, clasi- ficando en colores la facilidad con la que el usuario puede interactuar en ella. El color verde indica que se puede acceder con naturalidad, el naranja la zona donde es más difícil llegar, y el rojo donde probablemen- te resulta muy complicada la inte- racción con los elementos. La conclusión con respecto a estos datos es que se debe tener en cuenta esas zonas para el tamaño, la posi- ción y la disposición de los elemen- tos, como por ejemplo situar en las zonas verdes los elementos de mayor uso y en las zonas rojas los de menos uso o los que pueden inducir a error.
38 Diseño IU para aplicación móvil Helena Calva Oria Destacar que las pantallas de los smartphones han aumentado y lo siguen haciendo, hecho que influye directamente en el hábito de uso de estos dispositivos. Se estima que en el año 2021 los Smartphones más utilizados serán los de pantallas de entre 5,5” y 6” [7]. Figura 13
39 Diseño IU para aplicación móvil Helena Calva Oria TENDENCIAS c. TENDENCIAS El sistema visual Material Design, normativa que Google anunció en 2014, ha marcado tendencia en el mundo del diseño de interfaces, con- virtiéndose en una destacada corriente estilística en la actualidad [8]. Sus tres principios son: - La metáfora de los materiales. Utilización de capas, bordes, relieves, sombras, profundidad… para reprodu- cir el aspecto y los efectos visuales que generan las superficies de los objetos en la realidad. - Jerarquía. Escalar a través del uso de tipografías, cuadrículas, espa- cio y color, facilitando de esta forma diferenciar y focalizar el contenido y ayudando al usuario a entender más rápidamente, por ello cada espacio en blanco y cada contraste tiene su justi- ficación y permite crear una jerarquía visual. - Movimiento. Se añade para que la interacción resulte fluida, natural y agradable. Para ello, las animaciones generadas en la UI deben ser significa- tivas. En 2012 aparece ‘Metro’, de Win- dows [9], que derivará en el estilo Flat Design (o Diseño Plano), un tipo de diseño que incrementa la simplicidad de las interfaces. Consiste en suprimir o reducir todo tipo de decoración en un diseño de interfaz para simplificar el mensaje y facilitar la funcionalidad [10]. Se eliminan texturas, degra- dados, biselados, sombreados… Sin embargo, el hecho de eliminar cual- quier tipo de efecto tridimensional a los controles puede perjudicar el affordance1, es decir, “aquellas pro- piedades perceptibles del objeto que determinan cómo puede ser usado” [9], y por tanto provocar que el usuario no perciba cómo debe ser utilizada la interfaz (por ejemplo, que no perciba que un botón es accionable). La tendencia general apunta hacia diseños simples, personalizados, fáciles de entender y orientados a guiar al usuario para que realice cier- tas acciones. La posible masificación del Internet de las Cosas y el aumento de la navegación a través dispositivos wearables2 que permiten la movilidad (smartphones, tablets, phablets, smar- twaches…) seguirán impulsando estos cambios. 6 James J. Gibson en 1977, describió ‘affordance’ cómo “Todas las posibilidades que materialmente ofrece un objeto para reconocer cómo usarlo”. El concepto fue introducido en el contexto del diseño de interacción por Norman y se refiere a “aquellas propiedades perceptibles del objeto que confieren al diseño un aspecto autoexplicativo e intuitivo, haciendo obvio y explícito cómo debe ser usado y con qué objetivos”. 7 Wearables: dispositivos electrónicos inteligentes incorporados a la vestimenta o usados corporalmente como implantes o accesorios que pueden actuar como extensión del cuerpo o mente del usuario. 6 7
40 Diseño IU para aplicación móvil Helena Calva Oria DESARROLLO DESARROLLO DESARROLLO 5
41 Diseño IU para aplicación móvil Helena Calva Oria INVESTIGACIÓN a. INVESTIGACIÓN Para el desarrollo de la investiga- ción, se ha indagado en los fun- damentos del diseño móvil actual, profundizando en los requisitos para un buen uso del espacio, en las dife- rentes formas de interacción táctil y en otros factores importantes. Como la herramienta se basa en el sistema operativo Android, se han analizado los elementos nativos de este siste- ma y las diferentes resoluciones para las que se diseña. En ese contexto, se ha hecho un estudio de merca- do de apps similares que existen actualmente, investigando las fun- cionalidades que ofrecen cada una de ellas, la interacción con el usua- rio, su diseño, facilidad de uso, coste, etc. A continuación, se formu- larán una serie de entrevistas para evaluar las ideas iniciales: entrevis- tando a distintos perfiles de poten- ciales usuarios de la herramienta, con la idea de profundizar en el contexto de hábitos y necesidades. Por último, en esta fase, se efectúa un test de usabilidad con alguna de las herramientas del benchmarking y así se comprobarán las funcionali- dades. En lo referente al inicio de la fase de diseño, se han investigado las nece- sidades de acceso en distintos esce- narios para añadir en la aplicación aquellas que puedan resultar inte- resantes. Una vez analizados estos datos, se han establecido los requisi- tos iniciales que debe cumplir la nueva aplicación que se va a diseñar, y que conforme se vaya avanzando en el tra- bajo con los usuarios, se irán comple- tando, ya que será un proceso iterativo. El siguiente paso es definir una serie de escenarios de uso de la herramienta, para analizar en más detalle los proce- sos y procedimientos que debe llevar a cabo el usuario para interactuar con la herramienta. Esos escenarios de uso se complementarán con diagramas de flujos de interacción, necesarios a la hora de definir la interacción con la herramienta, y parte fundamental en el diseño. Por último, se enfocará el diseño del prototipo de la aplicación, realizando inicialmente un proceso de bocetaje de las diferentes pantallas en borrador (wireframes), para posterior- mente prototipar. Una vez creadas todas las pantallas necesarias, se generará una simulación. En la fase de evaluación se efectuarán una serie de pruebas para valorar ciertos aspectos del prototipo realizado con anterioridad: usabilidad, eficiencia, satisfacción del usuario... Inicialmente, se llevarán a cabo test con usuarios, aunque no se descarta utilizar otros métodos de inspección según la infor- mación obtenida en los resultados. Se considera realizar la evaluación heu- rística que propone Jakob Nielsen [11],
42 Diseño IU para aplicación móvil Helena Calva Oria al tratarse de un referente en el sector de la usabilidad. Por último, se recuerda que todas y cada una de estas fases que se analicen por separado, se trabajarán de forma iterativa, por lo que muy probable- mente no sigan un orden de trabajo específico.
43 Diseño IU para aplicación móvil Helena Calva Oria i. Entrevista a usuarios A continuación se reflejan las pre- guntas realizadas a los posibles usuarios durante el estudio y sus resultados. Para esta encuesta se ha utilizado un formulario de Google Forms con preguntas abiertas. La finalidad ha sido conseguir obte- ner la mayor información directa acerca del interés que suscita la apli- cación a los entrevistados. Se han realizado un total de 52 encuestas a diferentes perfiles. Figura 14
44 Diseño IU para aplicación móvil Helena Calva Oria Figura 15 Figura 16
45 Diseño IU para aplicación móvil Helena Calva Oria ii. Benchmarking En este apartado se dan a conocer otras aplicaciones existentes en el mercado, de esta forma se puede realizar una aproximación de cómo se posicionaría el nuevo producto con respecto a sus potenciales com- petidores. A continuación, se indican algunas de las que disponen de funcionalida- des similares a las que contendrá la nueva aplicación diseñada.
46 Diseño IU para aplicación móvil Helena Calva Oria HOMYHUB: HOMYHUB permite abrir el garaje desde el smartphone, controlando, monitoreando y gestionando los accesos. Precio: 135 € Fabricante: HomyHub Versión: 1.5.6 Características: - Orientada a chalets, comunidades de vecinos o empresas. - Activación en unos minutos, sin necesidad de conocimientos técnicos. - Se adapta a cualquier automatismo o motor de garaje, ya sea una puerta, barrera, cancela o persiana. - Usuarios ilimitados pueden usar la aplicación enviando “Mandos Virtuales”. - Compartir acceso al garaje “a medida”: permanente o específico por meses, días, horas.... - Monitorización de quién y cuándo se accede al garaje en tiempo real. - Monitorización si la persiana o puerta de garaje está abierta o cerrada. - Funciona simultáneamente con mandos o llaves de garaje tradicionales. Figura 17
47 Diseño IU para aplicación móvil Helena Calva Oria RING: Responder notificaciones y verificar el hogar en tiempo real. Pertenece a Amazon. Gestiona llamadas y aperturas pero está muy orientado a EEUU. Precio: desde 99€ Fabricante: Ring.com Versión: 3.32.1 Características: - Desde el sistema IOS permite: revisar eventos, configurar un nuevo dispositivo, cambiar la configuración, vigilar la casa con los timbres de vídeo y las cámaras de seguridad conectadas a Wi-Fi. - Envía alertas instantáneas cuando las personas presionan el timbre o activan los sensores de movimiento incorporados. - Cuando responde a la alerta, puede ver, escuchar y hablar con cualquier per- sona que se encuentre en su propiedad desde su iPhone, iPad o Mac. - Permite vigilar desde cualquier lugar y la conversación bidireccional. Figura 18
48 Diseño IU para aplicación móvil Helena Calva Oria AUGUST HOME: Apertura a través de wifi y bluetooth. Cerradura que funciona con un motor que desliza el pestillo. Orientado a USA. Precio: ~200€ Fabricante: August Home Inc. Versión: 10.15.0 Características: - Permite que entren las personas adecuadas: familia, amigos e incluso proveedores de servicios. Este sistema de acceso ofrece el control de la puerta principal, sin importar dónde se encuentre, desde su teléfono inteligente. - Utilizar la cerradura sin una llave física. - Crear claves virtuales para familiares e invitados. - Otorgar acceso para fechas y horarios específicos. - Desbloqueo y bloqueo automático de la puerta al salir y entrar. - Control de forma remota desde cualquier lugar - Feed de la actividad 24/7. - Recibe alertas cada vez que alguien toca tu timbre. - Ver y hablar con los visitantes que se encuentren en la puerta de casa. - Abrir la puerta a los invitados mientras se habla. - Ver actividad registrada en la puerta. Figura 19
49 Diseño IU para aplicación móvil Helena Calva Oria EQIVA LOCK: Distribuyen a través de varios portales web especializados, así como en Ama- zon. No distribuyen a través de su propia web. Precio: ~90 € Fabricante: eQ-3 AG Versión: 1.3.0 Características: - Eqiva Bluetooth permite el bloqueo de puerta, desbloquear y abrir a través de la aplicación. Los perfiles de acceso individuales proporcionan un control de acceso óptimo al hogar. - La puerta principal se puede bloquear automáticamente gracias al cierre temporizado. - Funciona hasta en ocho teléfonos y también se puede configurar y controlar hasta ocho Eqiva. - La llave convencional permanece funcional. - Dispone de opciones de control e información del estado del dispositivo. - Configuración de los perfiles individuales de acceso y permite a terceros el acceso sólo en ciertos días, dentro de ciertos períodos. Figura 20
50 Diseño IU para aplicación móvil Helena Calva Oria Otras aplicaciones IoT a destacar que permiten la apertura de accesos son: Raixer: Hay que añadir un disposi- tivo a tu telefonillo que solo abre la puerta del portal y de la vivienda. No me convence nada las cerraduras de la vivienda que ofrecen. Precio: 119€. Se enfocan especialmente en aparta- mentos de alquiler tipo Airbnb, por lo que uno de sus canales de distri- bución son las propias plataformas. Disponen de venta online en página propia y red de distribuidores (se apuntan desde su web). El artículo aparece en Amazon pero sin dispo- nibilidad actual. Nello: Mismo concepto que Raixer, pero con mejor diseño y mayor interoperabilidad con cerraduras inteligentes. Precio: ~129€. Es una empresa alemana, por lo que se des- conoce si tiene distribuidores loca- les. En España solo se distribuyen a través de canales online. Venta a tra- vés de su web de su solución para el portal junto con otras de otros pro- veedores partners (Danalock, Yale, SimonsVoss y Nuki). Disponible en Amazon. Nuki: Tienen una red de distribui- dores minoristas propia. Distribuyen en grandes plataformas en varios países de Europa. En España desde Leroy-Merlin y en Alemania desde Media Markt y la propia e-on. Tam- bién distribuyen a través de su pági- na web y Amazon. Disponen de dife- rentes formatos. Goliath: Similar a Ring, pero permi- te apertura por RFID. Precio: 180€ KONX: Parecido a Ring con una fun- ción para abrir puertas inalámbricas. Precio: 150€. SHEMSINZ: Parecido a los anterio- res, pero con sistema de cableado más similar a los tradicionales. Pre- cio: 130€. Homeit: Empresa de instalación de soluciones integrales enfocada a Airbnb.
51 Diseño IU para aplicación móvil Helena Calva Oria iii. Card Sorting Para abordar este apartado se ha uti- lizado el programa online Optimal Workshop, ya que permite lanzar encuestas de card sorting online de forma gratuita hasta un máximo de 10 personas. Se ha inventariado los recursos que debe tener la nueva aplicación para resultar útil para el usuario y se han definido en los siguientes: Figura 21 Como conclusión podemos extraer que no hay cambios muy relevantes en las respuestas de los participantes.
52 Diseño IU para aplicación móvil Helena Calva Oria iv. Propuesta de Valor La propuesta de valor que ofrece el desarrollo de este proyecto y la aplicación resultante del mismo es democratizar las ventajas de la utili- zación del IoT para el mayor número de usuarios, empleando como base la interconexión de dispositivos mediante internet y la interacción objeto-internet. Esta aplicación domótica pretende, junto con el producto que funciona, generar una nueva forma de control de accesos total de forma centralizada, actual- mente inexistente en el mercado.
53 Diseño IU para aplicación móvil Helena Calva Oria Figura 22
54 Diseño IU para aplicación móvil Helena Calva Oria JOURNEY MAP b. CUSTOMER JOURNEY MAP Figura 23
55 Diseño IU para aplicación móvil Helena Calva Oria BUYER PERSONA c. BUYER PERSONA A continuación se reflejan las pre- guntas realizadas a los posibles usuarios durante el estudio y sus resultados. Para esta encuesta se ha utilizado un formulario de Google Forms con preguntas abiertas. La finalidad ha sido conseguir obte- ner la mayor información directa acerca del interés que suscita la apli- cación a los entrevistados. Se han realizado un total de 52 encuestas a diferentes perfiles. FRANCISCO PÉREZ (Informático en el Ayuntamiento) Behaviours: - Trabaja de mañana - Tiene una persona para realizar las labores del hogar - Aficionado al running, la escalada y el ciclismo - Le apasionan las nuevas tecnolo- gías - Disfruta probando nuevos gadgets Recibe múltiples visitas familiares en su domicilio Facts & Demographics: - Padre trabajador - 46 años - Vive en Liencres - Trabaja en Hoznayo - Casado - Tiene una hija - Sueldo: 30.000 €/año
56 Diseño IU para aplicación móvil Helena Calva Oria Needs & Goals: - Tener más tiempo para sus aficiones - Gestionar quién cuida a su hija cuando su mujer y él trabajan - Terminar de reformar su vivienda - Deshacerse de las múltiples llaves que abren todas las cerraduras de su casa (valla exterior, puerta principal, puerta trasera, garaje...). Escenario 1: Poder realizar deporte sin llevar las llaves encima. Francisco Pérez sale a correr cada mañana y no quiere llevar el móvil encima. Para ello ha instalado el portero automático inteligente y la aplicación que lo gestiona. Dicha aplicación dispone de una función de “Asistente Virtual” que está activa- da. Al regresar de correr, Francisco Pérez toca en el timbre, espera unos segundos y una voz automática le pide las posiciones 3 y 6 de su clave numérica. Da el código por voz y la puerta se abre. Escenario 2: Poder permitir el acceso puntual a su primo, que ha ido al domicilio antes de llegar él del trabajo. Francisco Pérez recibe una llamada de su primo cuando aún se encuentra en el trabajo. Ha llegado ya al domicilio y no quiere esperar fuera, pues serían al menos 30 minutos en la calle. Francisco Pérez entra en la aplicación y, en remoto, le da acceso de forma instantánea una sola vez y “en tiempo real” sin tener que registrar un nuevo usuario, ya que el acceso ha sido registrado como apertura de Francisco Pérez “a distancia”.
57 Diseño IU para aplicación móvil Helena Calva Oria PERSONAS d. PERSONAS Figura 24
58 Diseño IU para aplicación móvil Helena Calva Oria ESCENARIOS e. ESCENARIOS Usuario: MARÍA ISABEL GONZÁLEZ Escenario 1: Registrarse como nuevo usuario y dar acceso a quien ayuda a su hijo con los deberes por las tardes. María Isabel González es una mujer de 42 años de edad, madre traba- jadora que ha comprado un nuevo portero inteligente que va asociado a una aplicación. Dentro de la caja del producto viene una tarjeta con un código QR. Con la cámara de su smartphone apunta y directamen- te se abre la opción de descargarla al teléfono móvil desde la tienda Google Play. Una vez descargada y desde la pantalla inicial, selecciona la opción “Registro”. En esta panta- lla se ofrecen una serie de opciones para el registro como introducir un e-mail y una contraseña, o realizar un registro automático conectando su cuenta de google a la aplicación. Escoge la opción de registro por usuario y contraseña y pulsa “Acce- der”. Aparece una pantalla de con- figuración inicial donde se pide la clave wifi para poder conectar el dis- positivo a la red, también se ofrece la vinculación a través de bluetooth. Una vez dada de alta en la aplicación, da acceso a la persona que da clases particulares a su hijo diariamente por las tardes. Para ello registra su mail y delimita los accesos a la franja horaria contratada. Escenario 2: María Isabel González debe recibir una entrega y el reparti- dor pasa por su zona cuando lleva a su hijo al colegio, por lo que no estará en casa para abrir la puerta al mensajero. María Isabel González abre la app, programa un aviso para el día pre- visto de la entrega, la aplicación genera un código que se envía al mensajero. El mensajero cuando llega a la casa introduce el código en la aplicación, María Isabel Gon- zález recibe el aviso de “permiso para acceder”, revisa el código y comprueba que es el mensajero, y finalmente da permiso para abrir la puerta. El mensajero entra, deja el paquete, y cuando sale vuelve a introducir el código. María Isabel González recibe la alerta de salida, revisa que el mensajero ha salido y comprueba que la puerta queda correctamente cerrada.
59 Diseño IU para aplicación móvil Helena Calva Oria Usuario: MANOLO GÓMEZ Escenario 1: Manolo Gómez quiere poder alquilar sus pisos en Airbnb sin tener que desplazarse para la entrega de llaves, ya que los tiene en distintos puntos de su comunidad y pierde mucho tiempo en ello. La aplicación se vincula con la API de la plataforma de Airbnb directa- mente, por lo que Manolo Gómez, como propietario y administrador, no tiene que estar pendiente de los accesos de sus pisos, simplemen- te los inquilinos se descargan la aplicación y pueden entrar al piso alquilado durante todo el periodo de vacaciones, por lo que ninguno tiene que ir a recoger ni entregar las lla- ves físicamente, ahorrando tiempo y ganando en comodidad. Escenario 2: Los huéspedes de Manolo Gómez se han ido ha pasar todo el día fuera y se han quedado sin batería en el móvil para poder entrar en el piso. Tampoco tienen el número de su arrendador para poder comunicarse con él. Cuando llegan al piso alqui- lado llaman al telefonillo. Mano- lo Gómez recibe una llamada del mismo, y puede hablar a través de su teléfono con el portero. Los inqui- linos pueden acceder al piso porque Manolo Gómez, tras comprobar que son ellos, les abre en remoto de forma puntual. Usuario: PILAR FERNÁNDEZ Escenario 1: Pérdida y olvido de lla- ves en reiteradas ocasiones. Pilar Fernández ha cambiado las llaves clásicas para poder abrir con el móvil, sobretodo a petición de sus hijos, ya que cada vez que perdía u olvidaba las llaves era un trastorno para todos. Ahora, si Pilar Fernán- dez sale de casa sin llaves, al llamar al telefonillo contesta cualquiera de sus hijos, que le abren el domicilio en remoto. Además, esta aplicación permite que cualquiera de sus hijos, parejas o nietos puedan visitarla sin tener que cambiar el bombín, cosa que debía hacer cuando perdía las llaves y que suponía un coste eco- nómico, ya que todos ellos pueden acceder a través de la aplicación. Escenario 2: Se va de viaje con el imserso y tiene un gato. Durante su periodo vacacional, autoriza a su vecina para que pueda entrar en el piso a dar de comer al gato, y mantiene el control porque puede comprobar en el registro de accesos las aperturas realizadas.
60 Diseño IU para aplicación móvil Helena Calva Oria BRIEFING f. BRIEFING Tras la información recopilada, se tendrá en cuenta los siguientes pun- tos indispensables para generar un correcto diseño de la interfaz: - Conocer la diversidad de formatos de pantalla de los smartphone. - Estructura de contenidos lo más plana posible, con muchas opciones y pocos niveles. Organización del contenido de manera simple y clara. - Habilitar la opción de ‘hacia atrás’ y mantener un acceso permanente a las opciones principales de nave- gación. - Alto contraste entre fondo y con- tenido. - Interacción directa en la pantalla mediante los dedos. - Mantener la coherencia en la ali- neación de los elementos y del texto. - Tipografía sans-serif optimizada para pantallas a baja resolución para garantizar la legibilidad del texto. - Mantener la misma paleta de colores en la aplicación. - Utilizar iconos reconocibles, que sean fáciles de identificar y significar. Además, para garantizar una buena experiencia de usuario, también se evitará introducir funcionalidades que todavía no estén disponibles o que fallen para no crear confusión y frustración al usuario. Actualmente es evidente que exis- te una demanda exponencial de soluciones de este tipo, sobretodo motivado por alquiler de viviendas a través de plataformas tipo Airbnb1 . Como posible oportunidad, destacar que las soluciones existentes son caras y no resuelven por separado todos los problemas de los clientes de forma integral. También es signi- ficante que la competencia no utilice los canales de venta y distribución habituales, confiando todo su activo a la venta online. 8 Airbnb: Plataforma online que, a través de Internet, pone en contacto a personas que quieren ofrecer sus viviendas en alquiler, con huéspedes que necesitan alojamientos temporales. Su función es de intermediario entre ambas partes. 8
61 Diseño IU para aplicación móvil Helena Calva Oria DISEÑO INTERFAZ DISEÑO INTERFAZ DISEÑO INTERFAZ 6
62 Diseño IU para aplicación móvil Helena Calva Oria FUNCIONALIDADES a. FUNCIONALIDADES A continuación, se indican las fun- cionalidades que se implementarán en el prototipo y que se analizarán en más detalle en los ejemplos de los casos de uso del siguiente apartado. Las principales funcionalidades son: - Registro de usuarios: Los usua- rios deben registrarse con una cuen- ta mail y una contraseña. - Buscador: Para localizar una cerradura concreta entre todas a las que tenga acceso el usuario. - Permisos: A través de una opción del menú principal, los usuarios tienen la posibilidad de gestionar los permisos, ya sean habituales o tem- porales. - Registro de accesos: Ofrece la información de todas las apertu- ras, hora de acceso y usuario que ha abierto. - Instalación: Guía para la instala- ción del dispositivo físico, configu- ración a través del wifi de la casa y se añade como administrador principal al usuario que lo instale. - Configuración: Permite elegir el color de la tarjeta, el nombre del domicilio, imágenes y nombre de cada acceso individual (garaje, por- tal, puerta principal)... - Chat de asistencia: Chat inter- no para ponerse en contacto con el servicio técnico si surge algún pro- blema. - Llamadas: Pantalla que aparece al recibir una llamada o videollamada desde el portero.
63 Diseño IU para aplicación móvil Helena Calva Oria F.DEINTERACCIÓN b. FLUJOS DE INTERACCIÓN Los escenarios planteados anteriormente marcan la pauta para desarrollar los flujos de interacción, versión que muestran los pasos a seguir para llegar al fin deseado por los sujetos tipo. En las siguientes páginas aparecen los resul- tados obtenidos: Figura 25
64 Diseño IU para aplicación móvil Helena Calva Oria Figura 26
65 Diseño IU para aplicación móvil Helena Calva Oria A.DECONTENIDOS c. ÁRBOL DE CONTENIDOS El árbol de contenidos permite definir la estructura que tendrá el proyecto final. Tras la investigación realizada, se ha obtenido el siguiente resultado: Figura 27
66 Diseño IU para aplicación móvil Helena Calva Oria WIREFRAME d. WIREFRAME En este punto es necesario plasmar todo el conocimiento recogido en las fases anteriores en un modelo visual del sistema a diseñar, realizando un prototipado en baja fidelidad o “wireframe” con la idea de, poste- riormente, obtener un prototipo en alta fidelidad totalmente navegable. Se simularán algunas partes del sistema final, que ayuden a realizar pruebas sin la necesidad de tener un desarrollo completo de la aplicación. Para ello, se desarrollarán ciertas funcionalidades que todo usuario debería poder completar con poca o muy poca ayuda, de tal forma que se obtenga una idea lo más fiel posible a la realidad de la interacción que los usuarios harán de la herramienta. Se ha optado inicialmente por rea- lizar prototipos en baja fidelidad debido a la facilidad de bocetar- los rápidamente en papel sin tener conocimientos de ninguna herra- mienta de prototipado.
67 Diseño IU para aplicación móvil Helena Calva Oria C.INTERFAZFINAL e. CARACTERÍSTICAS INTERFAZ FINAL En el siguiente apartado se detalla- rán las diferentes tomas de decisio- nes respecto al diseño de la interfaz de aplicación final.
68 Diseño IU para aplicación móvil Helena Calva Oria i. Tipografía La tipografía se utiliza para crear jerarquías claras y para guiar a los usuarios a través la experiencia y del producto. Esta es la estructura cen- tral de cualquier interfaz bien dise- ñada. En este caso la escala, el peso y la organización se han tenido en cuen- ta para desarrollar la interfaz de usuario del producto. La familia tipográfica elegida es Lato, en su peso regular y bold. ABCDEFGHIJKLMNÑOPQRSTUVWXYZ ,.¡!¿? abcdefghijklmnñopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNÑOPQRSTUVWXYZ ,.¡!¿? abcdefghijklmnñopqrstuvwxyz 1234567890 Para la jerarquía de los textos se han utilizado distintas dimensiones. - Encabezados a 42 px. - Títulos de sección a 35 px. - Resto de texto 32 px. Utilizando la tipografía de esta manera se establece una interfaz equilibrada e intuitiva.
69 Diseño IU para aplicación móvil Helena Calva Oria ii. Copy El estilo de escritura es breve, sencillo, conciso y preciso. Se utilizan palabras cortas, verbos acti- vos y el formato directo en la comuni- cación, consiguiendo que el usuario se sienta seguro navegando por la interfaz. El tono es informal y coloquial, evitando confundir.
70 Diseño IU para aplicación móvil Helena Calva Oria iii. Gama Cromática El color da vida al diseño y se utiliza para poner énfasis y crear asociacio- nes. En este caso, el color se usa para llamar la atención. El sistema de color para esta apli- cación fue diseñado para establecer una gama flexible que respalde la marca, las comunicaciones y el pro- ductos. La paleta principal simplificada consta de blanco, verde y ofrece la opción al usuario de personalizar el color de la tarjeta de cada vivienda. Es importante que la combinación de colores cumpla con las relaciones de contraste mínimas que especifica WCAG 2.0. Esto ayudará a los usua- rios daltónicos o con baja visión a interactuar, y mejorará la usabilidad para todos los usuarios. Figura 28
71 Diseño IU para aplicación móvil Helena Calva Oria iv. Layout En el prototipo de baja fidelidad o wireframe se ha desarrollado el layout para optimizarlo al diseño de la forma más eficaz. De esta forma, se han distribuido todos los elementos necesarios, es decir, cajas de información, botones, iconos y contenidos de las diferentes pantallas. Se ha creado una malla básica, loca- lizando una barra superior de herra- mientas, una barra inferior de nave- gación y utilizando la sección central como área de contenidos Figura 29
72 Diseño IU para aplicación móvil Helena Calva Oria v. Botones Para continuar con el flujo principal y el desarrollo correcto de la acción, se guía a los usuarios utilizando botones que resaltan las acciones principales que pueden realizar. Los tamaños y tipos de botones se han priorizado para destacar a los usuarios cuáles son los movimientos naturales más importantes. El texto del botón comunica exac- tamente lo que sucederá cuando el usuario interactúe con él, a través de etiquetas procesables, como “Añadir vivienda” y “Configurar permisos”. Se evitan las explicaciones largas en el texto de los botones, utilizando texto breve y claro. Los botones se han desarrollado en tres tamaños (grande, normal y pequeño) y en dos tipos, primario y secundario, con versiones sutiles en tonos más claros para mostrar accio- nes que destaquen tanto, evitando llamar la atención. Los botones primarios son los mejo- res para la acción primaria única en la pantalla. Todas las acciones restantes pueden ser botones secundarios u otro componente como las selecciones (en calendario, por ejemplo).
73 Diseño IU para aplicación móvil Helena Calva Oria vi. Iconografía La iconografía usa símbolos para representar directamente un objeto o una acción. Usándose con moderación pro- porcionan claridad en la interfaz y reducen la carga cognitiva, orien- tando al usuario visualmente. Los iconos proporconarán principal- mente un acompañamiento visual a otros componentes de la interfaz de usuario, llamando la atención sobre acciones específicas. El estilo es plano y con poco detalle, con un grosor mínimo de 2 px en los trazos, manteniendo la gama cro- mática y los tonos neutros en con- traste con el fondo. Figura 30
74 Diseño IU para aplicación móvil Helena Calva Oria vii. Icon App Figura 31 Se ha decidido utilizar un icon app donde aparezca el logotipo, sin iso- logo asociado. DOOD proviene de la unión de las palabras “Door” y “Open”. De esta forma, sigue el estilo de otras marcas, como Booking, plata- forma que podría generar posibles usuarios del sistema al tratarse de un nicho de mercado asociado al alquiler de viviendas.
75 Diseño IU para aplicación móvil Helena Calva Oria PROTOTIPO f. PROTOTIPO Tras el desarrollo en baja fideli- dad del apartado anterior, se decide invertir tiempo en producir un pro- totipo lo más fiel posible a la rea- lidad para que, al ser testeado por potenciales usuarios, la navegación sea más atractiva e interesante, ya que no se obtiene el mismo resultado de las pruebas con usuarios utilizan- do wireframe que utilizando imáge- nes de alta calidad, donde se puede plasmar con más detalle el trabajo realizado en etapas anteriores. Para la realización de las pantallas se han utilizado Adobe Illustrator. Se muestran a continuación algunas capturas de pantalla del prototipo en alta fidelidad para que se pueda apreciar el trabajo realizado:
76 Diseño IU para aplicación móvil Helena Calva Oria
77 Diseño IU para aplicación móvil Helena Calva Oria Figura 32
78 Diseño IU para aplicación móvil Helena Calva Oria EVALUACIÓN EVALUACIÓN EVALUACIÓN 7
79 Diseño IU para aplicación móvil Helena Calva Oria En esta última fase del proyecto, se utilizarán varias técnicas para obte- ner información sobre los diseños del prototipo realizado, con el obje- tivo de mejorarlos, evaluarlos e intentar detectar errores. Se emplearán dos de los métodos más utilizados, la evaluación heu- rística y el test de usuarios. Tras los resultados obtenidos, se revisará el prototipo por si fuera necesario rea- lizar cambios y mejoras.
80 Diseño IU para aplicación móvil Helena Calva Oria EVAL. EURÍSTICA a. EVALUACIUÓN EURÍSTICA La evaluación heurística se trata de una técnica que consiste en utilizar un conjunto de reglas y principios de usabilidad para estudiar y analizar interfaces de usuario. Estas reglas y principios están creados por exper- tos en la materia, y existen para diferentes tipos de interfaces y sis- temas interactivos. Jakob Nielsen es quién desarrolló este método, aun- que hay muchos otros autores que han trabajado en la materia, como Mayhey o Schneiderman. Para la evaluación del prototipo se ha escogido el publicado por Molich y Nielsen en 1990 [12]. Este méto- do utiliza 10 reglas generales para identificar los posibles problemas de usabilidad del interfaz. 1.Visibilidad del estado del sistema: El sistema siempre debería man- tener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada den- tro de un tiempo razonable. En este prototipo se ha utilizado diferentes técnicas para mantener al usuario informado, por ejemplo, se recibe retroalimentación una vez el usua- rio utiliza alguno de los botones, en este caso de los iconos laterales que simbolizan la llamada desde el tele- fonillo, la videollamada o el timbre, pulsado se muestra en color y no pulsado se queda en gris. En el menú principal situado en la parte supe- rior de la pantalla, se indica en color verde oscuro distinto al apartado por el que esté navegando el usuario (la tarjeta de la vivienda) y siempre mantendrá dicho color corporativo. Otro ejemplo se localiza en el apar- tado “Calendario”, donde se marca del color dominante la elección del periodo temporal de acceso. Figura 33
81 Diseño IU para aplicación móvil Helena Calva Oria 2.Relación entre el sistema y el mundo real: En el sistema se utili- zará lenguaje que sea familiar para el usuario. Para ello se siguen las convenciones del mundo real, haciendo que la información apa- rezca en un orden natural y lógico. Se han utilizado de una librería para desarrolladores con la intención de que sean lo más familiares posibles. Por ejemplo, el icono del “Calenda- rio”, extendido en todo tipo de apps para indicar el apartado con el mismo nombre, o el del “Perfil de usuario”. Se utilizan también las fle- chas “Adelante” y “Atrás” para indi- car cuando un usuario quiere avanzar o retroceder en el mes que visualiza. Figura 34 3.Control y libertad de usuario: En ocasiones los usuarios pueden elegir funciones del sistema por error y será necesaria una “salida de emergencia”. Ésta deberá estar marcada de forma clara para ser fácilmente reconocible y evitar el estado no deseado al que accedió el usuario, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer. Para cumplir con esta regla, si se selecciona cualquier menú, se puede salir del mismo pulsando fuera de esa pantalla. Figura 35
82 Diseño IU para aplicación móvil Helena Calva Oria 4.Consistencia y estándares: Los usuarios no deberían cues- tionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas. En el caso de esta aplicación, se mantiene de forma coherente un estándar de color, los tamaños de los botones, de iconos y de textos, buscando la fácil comprensión de los accesos a los menús y las acciones que el usuario puede realizar en la apllica- ción. 5.Prevención de errores: Es mejor realizar un diseño cuida- doso que prevenga la ocurrencia de problemas que un buen diseño de mensajes de error. Por otra parte, en el apartado de “Añadir vivienda” se incluye la funcionalidad para la prevención de errores: una ventana modal en caso que el usuario pulse “guardar” sin haber introducido ningún dato. Figura 36
83 Diseño IU para aplicación móvil Helena Calva Oria 6.Reconocimiento antes que recuerdo: Se deben hacer visibles los objetos, acciones y opciones. El usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir ade- lante. Las instrucciones para el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario. En la pantalla donde es importante que el usuario confirme una acción pulsando el botón “guardar”, se mantiene siempre visible para que el usuario tenga presente dicha acción. Figura 37 7.Flexibilidad y eficiencia de uso: La presencia de aceleradores, que no son vistos por los usuarios nova- tos, puede ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapten el sistema para usos frecuentes, ya que utilizan diferentes caminos para acceder a un mismo destino. Los usuarios más experimentados a la hora de realizar la tarea de elimina- ción de un usuario o vivienda podrán realizarlo directamente desde la ficha de lista con el gesto “swipe” (deslizar hacia la izquierda), y no será necesario acceder a editar para ir al botón eliminar.
84 Diseño IU para aplicación móvil Helena Calva Oria 8.Estética y diseño minimalista: Los diálogos no deben contener información que sea irrelevante o poco usada. Cada unidad extra de información en un diálogo, compi- te con las unidades de información relevante y disminuye su visibilidad relativa. Se ha sintetizado al máximo el texto de los elementos interacti- vos, para evitar confusiones y dis- tracciones. Se han seguido las guías de desarrollo del sistema operativo, tomando como referencia las accio- nes predefinidas: “cancelar”, “acep- tar”, “ok”... Sí que se ha incluido un título y subtítulo en las ventanas modales de advertencia, a la hora de prevenir de un error al usuario. 9.Ayudar a los usuarios a recono- cer, diagnosticar y recuperarse de errores: Los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugiriendo una solu- ción constructiva al problema. Se incluyen mensajes de advertencia en las acciones que se creen que pueden ser no intencionadas, o que quizá puedan provocar un error al usuario. Se han utilizado ventanas modales en ciertas acciones para confirmar con el usuario la acción que quiere realizar, aportándole más informa- ción de la que inicialmente aparece en la pantalla. Por otra parte, se des- activan botones mientras el usuario no introduzca ciertos datos que se le piden, por ejemplo la clave wifi, con el objetivo de que complete toda la información necesaria y que no avance con datos incompletos que puedan dar un error posterior.
85 Diseño IU para aplicación móvil Helena Calva Oria 10. Ayuda y documentación: Incluso en los casos en que el sistema pueda ser usado sin documentación, podría ser necesario ofrecer ayuda y docu- mentación. Dicha información debe- rá ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa. Como se ha pensado desde un pri- mer momento que es necesaria una guía rápida de uso, se ha incluido un tutorial a través del cual se indican los principales apartados de la apli- cación. El usuario puede en cualquier momento acceder desde el menú “Tutorial de instalación” si necesita consultar alguna de las opciones. También existe un soporte en línea en forma de chat para dar apoyo al usuario en caso de necesidad.
86 Diseño IU para aplicación móvil Helena Calva Oria TEST USUARIOS b. TEST DE USUARIOS Desde el inicio se ha fijado como objetivo crear un prototipo interac- tivo de una aplicación android que permita gestionar el control de acce- sos y donde poder realizar pruebas reales con usuarios target. Tras el trabajo realizado, se ha podi- do generar una simulación real de lo que son las principales funcio- nalidades de la herramienta. Para este punto, se ha utilizado una de las técnicas dentro del proceso DCU pensada para evaluar con usuarios reales si el modelo del prototipo se ha realizado correctamente, reali- zando un test de usuarios presencial, donde evaluador y participante se encuentran en la misma ubicación, y donde tendremos la posibilidad de observar los comportamientos de varios usuarios en el uso del pro- totipo. El objetivo de este método de evaluación consiste en obtener información mediante el uso de la herramienta por usuarios potencia- les. Se busca comprobar cuáles son los posibles errores en caso de que existan, cuáles pueden ser las mejo- ras a implementar, evaluar el dise- ño, el contenido, la navegación y la utilidad de la misma… Para la realización de la prueba se ha utilizado el programa “Marvel APP”, que ofrece una simulación de un dispositivo móvil por lo que la expe- riencia del usuario es prácticamente la misma que si probase la aplicación en un dispositivo real. Se puede visitar la simulación en la siguiente dirección: https://marvelapp.com/proto- type/271i08hg También se ha grabado un vídeo explicativo de poco más de minuto y medio con las funciones principales de la aplicación. La intención inicial ha sido incluirlo como videotutorial dentro de la propia app, pero no se ha conseguido que el link funcione dentro del simulador. Se puede ver el vídeo aquí.
87 Diseño IU para aplicación móvil Helena Calva Oria i. Estructura del Test Para la realización del test de usua- rios se ha llevado a cabo inicial- mente un apartado de introducción, poniendo en situación al usuario y explicando el contenido de la prueba. Se le indica el objetivo de la misma, las instrucciones, y algunas pau- tas importantes como son que haga cualquier comentario en alto, ya que no se le está evaluando a él, sino a la aplicación, dejando claro que no hay respuestas correctas o incorrectas. En el punto uno se realizan las pre- guntas sociodemográficas con el objetivo de clasificar al usuario den- tro de un grupo concreto. Debe de informar de su género, edad, nivel de estudios finalizados, profesión y otras preguntas relacionadas con la tecnología y con su interés por la domótica. El punto dos es una prueba durante 10 minutos de utilización libre de la aplicación. Se indican algunas pau- tas para que no se sienta extraño con el manejo del prototipo, pero en ningún caso se guía sobre la APP, salvo por la visualización del video- tutorial una vez llega a la pantalla destinada a ello. Con esta prueba se pretende evaluar la facilidad de uso por primera vez sin ningún tipo de ayuda más de la que ofrecen las propias funcionalidades de la aplicación. En el punto tres se prueba a comple- tar cuatro tareas específicas focali- zadas en alguna de las funcionalida- des de la aplicación. Se ha valorado si los usuarios tienen éxito o no en la ejecución de dichas tareas, el tiem- po total dedicado en completarlas, y anotaciones que puedan resultar interesantes de analizar a posteriori. En el último punto se realizan pre- guntas cerradas y abiertas referentes a las cuatro áreas principales: conte- nido, navegación, diseño y utilidad.
88 Diseño IU para aplicación móvil Helena Calva Oria ii. Resultados del Test Se ha realizado el test con cinco per- sonas, dos hombres y tres mujeres. Los hombres tienen 56 (informá- tico) y 33 años (ingeniero), y las mujeres 64 (bibliotecaria), 27 (pro- fesora de infantil) y 16 (estudiante). Los diferentes perfiles enriquecen la información recabada para el estu- dio. Todos disponen de smartphone con sistema operativo android. Su relación con el uso de la tecnología es bastante diversa, aunque todos la manejan a nivel usuario.
89 Diseño IU para aplicación móvil Helena Calva Oria 1. Uso libre de la aplicación El hecho de que los cinco sujetos participantes estén habituados al uso de la tecnología ha influido en los resultados tan óptimos, ya que si no fueran usuarios habituales hubiesen tenido más problemas en navegar por los diferentes apartados y llegar a todas las funcionalidades que la APP ofrece. Si bien, no es fácil navegar por un prototipo con fun- cionalidades limitadas, El tiempo medio de navegación fue de 10:06 min. Todos pudieron acce- der a la herramienta y navegar por algunos de los apartados. tres de los cinco usuarios prefirieron ver el videotutorial, y dos de ellos no. En general están contentos con lo que han visto de la herramienta, pero tienen ciertas dudas a nivel de contenido (dónde encontrar qué). Sobre todo en la parte de gestionar los permisos.
90 Diseño IU para aplicación móvil Helena Calva Oria 2.Tareas específicas Se ha tenido en consideración varios factores para realizar la evaluación de este apartado, como el tiempo y la consecución de la tarea en una escala de tres valores: - Éxito: Si la tarea se ha completado correctamente en el tiempo máximo establecido. - Falso éxito: Si el usuario cree que ha completado la tarea, pero en rea- lidad no lo ha hecho. - Error: Si el usuario no ha podi- do completar la tarea en el tiempo máximo establecido. La toma de medidas durante el estu- dio ha sido estricta para conseguir la mayor calidad en la información, no dando por válidos algunos casos en los que, por el uso de un prototipo, la tarea fue más complicada. De las cuatro tareas que se han indi- cado, tan sólo una tiene un 100% de éxito entre los usuarios. Es decir, solo en una se ha completado la tarea satisfactoriamente en el tiem- po máximo establecido.
91 Diseño IU para aplicación móvil Helena Calva Oria 3. Cuestionario final Al finalizar la prueba se ha realiza- do un cuestionario con una serie de preguntas en relación a las cuatro áreas principales, con tres pregun- tas cerradas de respuesta “SÍ/NO” y una abierta, permitiendo a los usua- rios comentar sus impresiones. Los resultados obtenidos han sido: Contenido: A todos les parece útil utilizar el móvil para acceder al domicilio sin la necesidad de llaves, pero les preocupa qué puede ocurrir si se quedan sin batería, les roban el teléfono o se cae el wifi. Si bien no son problemas directos de la fun- cionalidad de la app, se buscará una alternativa a dichas cuestiones. Navegación: No se aprecia dificul- tad de navegación ni en su valora- ción está reflejado que les resulten complicadas las acciones a ejecutar, pero al ser la primera toma de con- tacto no hay fluidez para realizar algunas tareas. La ventaja principal es que todos los usuarios utilizan en su smartphone el sistema operativo Android, lo que propicia que se sien- tan cómodos con la interfaz. Diseño: El diseño les resulta atrac- tivo, consideran el color utilizado acertado y no han tenido problemas para visualizar textos, aunque a los de mayor edad les gustaría poder ajustarlo como lo hacen en la aplicación whatsapp. Utilidad: Todos aprecian un gran potencial en la aplicación y sus fun- cionalidades: La bibliotecaria para las visitas de sus familiares, el infor- mático porque tiene dos pisos que alquila en airbnb, el ingeniero por- que es adicto a la innovación tecno- lógica, la profesora para poder ges- tionar entregas de paquetes sin estar en el domicilio y la estudiante para no tener que llevar las llaves encima nunca más.
92 Diseño IU para aplicación móvil Helena Calva Oria 8 CONCLUSIONES CONCLUSIONES CONCLUSIONES
93 Diseño IU para aplicación móvil Helena Calva Oria El análisis previo realizado ha ayu- dado a recopilar información de aplicaciones similares existentes actualmente en el mercado. De dicho estudio se han extraído como refe- rencia las ideas más interesantes para los usuarios y se han tenido en cuenta las posibles carencias, erro- res o problemas que se han detecta- do y que hacen que la experiencia del usuario no sea la esperada: textos que no se visualizan, feedback de los elementos con el usuario, limitacio- nes de espacio… Tras este estudio, se puede afirmar que el IoT será un elemento más del día a día, y se convertirá en un componente estratégico para los negocios. Con los datos recopilados se revela que será fundamental en los procesos de toma de decisiones, otorgando más agilidad a las accio- nes. Conseguirá ahorrar costes y aumentar la seguridad, mejorando procedimientos y logrando empre- sas más innovadoras y productivas, así como permitiendo a los usuarios particulares optimizar procesos dia- rios repetitivos, ofreciendo de este modo mayor tiempo libre a los mis- mos y un considerable descenso de costes gracias al ahorro energético. El principal problema encontrado es la reticencia que puedan tener los usuarios al cambio, debido a la falta de información y a la escasez de tecnología referente a IoT. Sin embargo, y como se ha comentado, el potencial crecimiento exponencial de este sector propiciará la creación de más aplicaciones y dispositivos IoT, lo que afianzará la confianza de los consumidores. Por ello, y dado que la aplicación creada permite utilizarse tanto en el ámbito doméstico como profesional, se puede afirmar que su desarrollo contribuye a la mejora y el avance de la sociedad actual y futura. Una vez realizado el test con usua- rios y como punto final al proyecto, se procede a realizar el análisis final del trabajo realizado. El mayor desafío ha sido integrar todas las funcionalidades que se habían manifestado necesarias en las fases anteriores de la metodo- logía utilizada para que el producto final cumpliera las expectativas de los usuarios. Una de las deducciones a las que se ha llegado durante el estudio es la necesidad de mantener al usuario en el centro del proceso de diseño para su óptimo desarrollo y a asumir la diversidad de opiniones que pueden surgir de una sola idea. Sin tener en cuenta la opinión de varios usuarios, el resultado final estaría condicionado a la experien- cia de uno mismo, y no basado en los diferentes perfiles que utilizarán la herramienta. Por ello se conside- ra que es fundamental contar con
94 Diseño IU para aplicación móvil Helena Calva Oria el mayor número posible de perso- nas que puedan aportarnos opiniones y conocimiento dentro de su propia experiencia en el uso de aplicaciones. Los apartados más difíciles de llevar a cabo han sido los que hacían refe- rencia a la participación de personas en alguna de las fases del proyecto: entrevistas y cuestionarios, test de usuarios y recopilación de funcio- nalidades. A pesar de todo, se han completado todos los objetivos, tanto generales como específicos, y se ha conseguido obtener un producto final muy similar del que sería la aplicación real. Utilizar la filosofía DCU como base para el proyecto, ha ayudado a esta- blecer una planificación ordenada en tiempo y dedicación, ya que este pro- ceso fija una estructura definida. Ade- más, esta metodología permite flexi- bilidad en cada una de las fases para profundizar lo necesario, adaptándose a la temática. Las líneas de trabajo futuro se basarán en la iteración entre fases, trabajando soluciones a los problemas planteados por los usuarios en los test. En conclusión, los objetivos de este trabajo han sido siempre ambiciosos, con el fin de adecuarse a un producto final real y, tras revisar el trabajo fina- lizado, se ha cumplido con el cometido en su totalidad.
95 Diseño IU para aplicación móvil Helena Calva Oria 9 FIGURAS FIGURAS FIGURAS
96 Diseño IU para aplicación móvil Helena Calva Oria FIGURAS FIGURAS Figura 1: Análisis DAFO Figura 2. Tabla de recursos Figura 3. Diagrama de Gantt Figura 4. Timing Figura 5. Estructura del proceso de Design Thinking (Fuente https:// senorcreativo.com/) Figura 6. Estructura del proceso de DCU Figura 7. Flujo de trabajo en un desarrollo iterativo Figura 8. Tamaño de elementos tác- tiles (Fuente: Worköholics) Figura 9. Recomendación de tamaño de botones para diseñadores (Fuen- te: Apple) Figura 10. Porcentaje de errores de interacción táctil (Fuente: Micro- soft) Figura 11. Gestos básicos de interac- ción (Fuente: lukew.com) Figura 12. Zonas de interacción del pulgar (Fuente: gizmodo.com.au) Figura 13. Medidas de la pantalla y resolución de smartphones (Fuente: norfipc.com) Figura 14. Infografía de edad de encuestados Figura 15. Porcentaje de resultados de las respuestas de la encuesta Figura 16. Infografía de precio máxi- mo que el usuario está dispuesto a pagar Figura 17. Distintas pantallas de la interfaz de HomyHub Figura 18. Distintas pantallas de la interfaz de Ring Figura 19. Distintas pantallas de la interfaz de August Home Figura 20. Distintas pantallas de la interfaz de Equiva Lock Figura 21. Card Sorting Figura 22. Value Proposition Canvas Figura 23. Customer Journey Map Figura 24. Personas Figura 25. Escenario 1 María Isabel Figura 26. Escenario 2 María Isabel Figura 27. Árbol de contenidos Figura 28. Gama cromática Figura 29. Layout Figura 30. Ejemplo de iconos Figura 31. Icon App Figura 32. Prototipo de Alta Fidelidad Figura 33. Aviso configurar wifi de la app Figura 34. Permisos temporales de la app Figura 35. Perfil general de la app Figura 36. Pantalla añadir DOOD Figura 37. Permiso temporal semanal
97 Diseño IU para aplicación móvil Helena Calva Oria 10 BIBLIOGRAFÍA BIBLIOGRAFÍA BIBLIOGRAFÍA
98 Diseño IU para aplicación móvil Helena Calva Oria BIBLIOGRAFÍA BIBLIOGRAFÍA - SÁENZ HIGUERAS, NITA; VIDAL OLTRA, RUT: Redacción de textos científi- cotécnicos. Barcelona - CALLEJA GARCÍA, CARLA; SIERRA TAULÉ, NÚRIA. Cómo abordar el trabajo final del grado de Diseño y Creación Digital en seis sencillos pasos. Recurso de aprendizaje UOC. - BENEITO MONTAGUT, ROSER. Presentación de documentos y elaboración de presentaciones. Recurso de aprendizaje UOC. P08/89018/00446 - HASSAN-MONTERO, Y.; ORTEGA-SANTAMARÍA, S. (2009). Informe APEI sobre Usabilidad. Gijón: Asociación Profesional de Especialistas en Informa- ción, 2009, 73pp. ISBN: 978-84-692-3782-3. - MEMBRIVES, JUDITH. La importancia estratégica del diseño centrado en las personas. Mosaic [en línea], (noviembre 2019), no. 176. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n176.1951 - [1] VALDEOLMILLOS, CELIA: El mercado del hogar inteligente crecerá por encima del 25% en 2019, (abril 2019), Blog MCPRO: https://www.muycompu- terpro.com/2019/04/01/mercado-hogar-inteligente-2019 [en línea] - [2] ESIC BUSINESS & MARKETING SCHOOL. Hiperconectividad: datos, cifras, uso, y retos del IoT en Digital Business (enero 2018), art. https://www. esic.edu/rethink/marketing-y-comunicacion/hiperconectividad-datos-ci- fras-uso-retos-del-iot-digital-business [en línea] - [3] LET ‘S 4 MARKETING. El impacto del Internet de las Cosas (IoT) y sus aplicaciones, (septiembre 2019). Blog LetsMarketing. https://www.letsmar- keting.com/uncategorized/el-impacto-del-internet-de-las-cosas-iot-y- sus-aplicaciones/ [en línea] - [4] MEGNA, LENADRO: Orígenes de la metodología UX (parte 2). Blog D.La- teral. https://disenolateral.com/blog/origenes-de-la-metodologia-ux-2/ [en línea]
99 Diseño IU para aplicación móvil Helena Calva Oria - [5] VILLAMOR, CRAIG; WILLIS, DAN; WROBLEWSKI, LUKE (abril 2010). Touch gesture reference guide. https://www.lukew.com/ff/entry.asp?1071 [en línea] - [6] HOOBER, STEVEN. How Do Users Really Hold Mobile Devices? (febrero 2013). Blog uxmatters. https://www.uxmatters.com/mt/archives/2013/02/ how-do-users-really-hold-mobile-devices.php [en línea] - [7] LOMAS, NATASHA: Smartphone screens find their size sweet spot, (mayo 2017). Blog TechCrunch. https://techcrunch.com/2017/05/31/pha- bles-are-the-phuture/ [en línea] - [8] PÉREZ, ENRIQUE. ¿Qué es Material Design?, (noviembre 2014). Art. de opinión en ‘El Androide Libre’. https://elandroidelibre.elespanol. com/2014/11/que-es-material-design.html [en línea] - [9] FRÍAS, NAGORE. Una mirada a la evolución del diseño de interfaz, (junio 2015). Bilbao: Workoholics Blog. https://www.workoholics.es/evolu- cion-del-diseno-de-interfaz/ [en línea] - [10] GARCÍA, JORDI. Qué es el flat design o diseño plano, (septiembre 2013). Departamento de Internet Blog. https://www.departamentodeinternet.com/ que-es-flat-design-diseno-plano/ [en línea] - [11] Cita: Norman, D.A. (1988). The Psychology of Everyday Things. Basic Books. - [12] FINELLI, FERNANDO. 10 reglas heurísticas de usabilidad de Jakob Niel- sen, (junio 2011). Blog Braintive. http://www.braintive.com/10-reglas-heu- risticas-de-usabilidad-de-jakob-nielsen/ [en línea]
100 Diseño IU para aplicación móvil Helena Calva Oria

Más contenido relacionado

PDF
PERFIL DE PROYECTO DE GRADO
Diego Armando
 
PPTX
Iot (internet de las cosas).
Gina Paola Vega Reyes
 
PDF
ERIKA SANCHEZ (1).pdf
ErikasofiaSanchez
 
PDF
69369
Ines Chaouachi
 
PPTX
Taxi Everywhere
Agustín
 
PPTX
Tendendias de la globalización de software.2
Laura González
 
PDF
Internet de las Cosas. Tecnologías, Aplicaciones y Retos de Futuro
Vicente Pelechano
 
PPT
2009 03 05 Inredis.Seminario Upm 30min
INREDIS research project, led by Technosite
 
PERFIL DE PROYECTO DE GRADO
Diego Armando
 
Iot (internet de las cosas).
Gina Paola Vega Reyes
 
ERIKA SANCHEZ (1).pdf
ErikasofiaSanchez
 
69369
Ines Chaouachi
 
Taxi Everywhere
Agustín
 
Tendendias de la globalización de software.2
Laura González
 
Internet de las Cosas. Tecnologías, Aplicaciones y Retos de Futuro
Vicente Pelechano
 
2009 03 05 Inredis.Seminario Upm 30min
INREDIS research project, led by Technosite
 

Similar a Diseño de interfaces de usuario y experiencia de usuario (20)

PPTX
la-ingenieria-telematica-240620233415-a0d3e18f.pptx
MateoBonilla10
 
PPT
DomóTica De Banda Ancha
mhedgal
 
PPTX
iot
FranSimp
 
PDF
El internet de las cosas
Angélica López
 
PPTX
Presentación "Internet de las cosas: la revolución IoT"
José Antonio García-Calvo
 
PDF
S8 edgardo perez_informe
Edgardo Perez
 
PPTX
WebDom
Víctor Eer
 
DOC
Internet de las cosas
Sandra Milena Cardozo
 
DOCX
internet de las cosas .docx
YeniferElianaRojas
 
PPTX
Internet de las cosas (Lot)
Landagreeni
 
PPTX
Presentación Equipo 3 - Diseño de Servicios de Tecnologías de Información ITESM
Daniel Álvarez Aguilera
 
PDF
Desarrollo de una aplicacion web
RuthReyes71
 
PDF
¿Existe UX en Internet de las Cosas?
Sergio Majluf
 
PDF
Tarea 1 internet of things miércoles 31 1-18
Clara Luz Vásquez
 
PDF
Construyendo un proyecto_de_iot
Corporacion Colombia Digital
 
PDF
Dossier Corporativo de la empresa de creación de apps para móvil Lorem Solutions
Ramón Arellano Rodríguez
 
PDF
Internet movil
Claudio Lobos
 
PDF
Situación problemática Olimpiada Jurisdiccional - Programacion 2019
omarka
 
PPTX
El "IoT for dummies" / Creación de productos IoT
Bruno Cendón
 
PPTX
JAYWAY.pptx
AndresFernandoMoraCa
 
la-ingenieria-telematica-240620233415-a0d3e18f.pptx
MateoBonilla10
 
DomóTica De Banda Ancha
mhedgal
 
iot
FranSimp
 
El internet de las cosas
Angélica López
 
Presentación "Internet de las cosas: la revolución IoT"
José Antonio García-Calvo
 
S8 edgardo perez_informe
Edgardo Perez
 
WebDom
Víctor Eer
 
Internet de las cosas
Sandra Milena Cardozo
 
internet de las cosas .docx
YeniferElianaRojas
 
Internet de las cosas (Lot)
Landagreeni
 
Presentación Equipo 3 - Diseño de Servicios de Tecnologías de Información ITESM
Daniel Álvarez Aguilera
 
Desarrollo de una aplicacion web
RuthReyes71
 
¿Existe UX en Internet de las Cosas?
Sergio Majluf
 
Tarea 1 internet of things miércoles 31 1-18
Clara Luz Vásquez
 
Construyendo un proyecto_de_iot
Corporacion Colombia Digital
 
Dossier Corporativo de la empresa de creación de apps para móvil Lorem Solutions
Ramón Arellano Rodríguez
 
Internet movil
Claudio Lobos
 
Situación problemática Olimpiada Jurisdiccional - Programacion 2019
omarka
 
El "IoT for dummies" / Creación de productos IoT
Bruno Cendón
 
JAYWAY.pptx
AndresFernandoMoraCa
 
Publicidad

Último (20)

PDF
FASE-4-Tercero-y-Cuarto_Vinculacion-entre-Contenidos-del-Programa-Sintetico-y...
FranciscoTorres363394
 
PDF
Carta magna de la excelentísima República de México
AMassielZamora
 
PPTX
higiene-y-seguridad-industrial salud ocupacional.pptx
cinthia530003
 
PDF
UNIDAD 2 | Parte 2 | Informar con precisión y criterio
estefaniarossoddhh
 
DOCX
PROGRAMA ANALITICO ESCUela en san luis potosi 25-26.docx
DavidABadilloBlack
 
PDF
Estudios sociales en cuarto grado de basica
OsirisTejada1
 
PDF
Porque Nadie Me Lo Dijo Antes - Julie Smith Ccesa007.pdf
Demetrio Ccesa Rayme
 
PDF
El Seminario de Jacques Lacan_ Libro 3.pdf
SuselX
 
PDF
Organizador curricular multigrado escuela
IsidroDelAngel
 
PDF
Manual-de-Cargos-y-Funciones-V-02-11-2025
Carlos Humberto Cruz Bustos
 
PDF
PLANEACIÓN_Uso de plataformas y Redes virtuales_LGE_ 2025.pdf
MarcoAntonioGuzmanPo
 
PDF
tu hijo tu espejo: libro que te ayudará a comprender la relación padres e hij...
48704
 
PDF
4° Dosificación anual (2025-2026) - Profe Diaz.pdf
amla1588
 
PDF
Escribalo y Hágalo Realidad HAK Ccesa007.pdf
Demetrio Ccesa Rayme
 
PDF
Temas a elegir para desarrollar oralmente 2do cuatri 2025.pdf
RicardoGermnRincn1
 
DOCX
Programa Analítico Matemáticas 1° Editorial MD.docx
LuisSanchezCamacho2
 
PDF
CUIDADOS DE PERIOPERATORIO I-ENFERMERIA I
MelanyMandarachiRive
 
PDF
ESTRATEGIAS_PARA_CONSTRUIR_LA_CONVIVENCI.pdf
ManuelQuipuscoaSilve
 
PDF
4. Guía para el Seguimiento y Evaluación de Proyectos Sociales.pdf
Nash Rodriguez
 
PDF
VATICANO Y LOS GRANDES GENOCIDIOS DEL SIGLO XX.pdf
Jose350341
 
FASE-4-Tercero-y-Cuarto_Vinculacion-entre-Contenidos-del-Programa-Sintetico-y...
FranciscoTorres363394
 
Carta magna de la excelentísima República de México
AMassielZamora
 
higiene-y-seguridad-industrial salud ocupacional.pptx
cinthia530003
 
UNIDAD 2 | Parte 2 | Informar con precisión y criterio
estefaniarossoddhh
 
PROGRAMA ANALITICO ESCUela en san luis potosi 25-26.docx
DavidABadilloBlack
 
Estudios sociales en cuarto grado de basica
OsirisTejada1
 
Porque Nadie Me Lo Dijo Antes - Julie Smith Ccesa007.pdf
Demetrio Ccesa Rayme
 
El Seminario de Jacques Lacan_ Libro 3.pdf
SuselX
 
Organizador curricular multigrado escuela
IsidroDelAngel
 
Manual-de-Cargos-y-Funciones-V-02-11-2025
Carlos Humberto Cruz Bustos
 
PLANEACIÓN_Uso de plataformas y Redes virtuales_LGE_ 2025.pdf
MarcoAntonioGuzmanPo
 
tu hijo tu espejo: libro que te ayudará a comprender la relación padres e hij...
48704
 
4° Dosificación anual (2025-2026) - Profe Diaz.pdf
amla1588
 
Escribalo y Hágalo Realidad HAK Ccesa007.pdf
Demetrio Ccesa Rayme
 
Temas a elegir para desarrollar oralmente 2do cuatri 2025.pdf
RicardoGermnRincn1
 
Programa Analítico Matemáticas 1° Editorial MD.docx
LuisSanchezCamacho2
 
CUIDADOS DE PERIOPERATORIO I-ENFERMERIA I
MelanyMandarachiRive
 
ESTRATEGIAS_PARA_CONSTRUIR_LA_CONVIVENCI.pdf
ManuelQuipuscoaSilve
 
4. Guía para el Seguimiento y Evaluación de Proyectos Sociales.pdf
Nash Rodriguez
 
VATICANO Y LOS GRANDES GENOCIDIOS DEL SIGLO XX.pdf
Jose350341
 
Publicidad

Diseño de interfaces de usuario y experiencia de usuario

  • 1. DISEÑO UI/UX DE APLICACIÓN PARA CONTROL DE ACCESOS UNIVERSITAT OBERTA DE CATALUNYA Grado Diseño y Creaciones Digitales Trabajo Final de Grado HELENA CALVA ORIA 2020/2021
  • 3. 3 ÍNDICE 1. Introducción……………………………………………......................................... a. Contexto........……………………………….…….…........................................... b. Descripción……………………………………….…….…..................................... c. Definición…………………………………………................................................ d.Justificación…………………………………………............................................ e.Hipótesis…………………………………………………....….................................. f. Objetivo……………………………………………….….......................................... g.Palabras clave…………….........................……………………......................... h. Abstract................................................................................................... 2.Planificación……………………………………….....................................…….... a. Herramientas .......................................................…...………….….…....... b. DAFO………………………………………..………….................................………... c. Tabla de Recursos…………………………………….......................…..………... d. Diagrama de Gantt……………………………………………............................ e. Timing…………………….............................………………………………………… 3.Metodología……………………………………….....................................……..... a. Técnicas………………………………………………….……................................... b.Metodología…....................…………………………….……....................…...... c.Validación................................……………………………………...................... 4.Investigación……………………………………….....................................……... a. Antecedentes: Usabilidad y experiencia de usuario………….......... b. Fundamentos del diseño en móviles………………………….................. c. Tendencias de diseño actuales………………………………....................... 5. Desarrollo del proyecto…………………………...............……….................... a. Investigación………………………………………………….…............................. i. Entrevista a usuarios................................................................. ii. Benchmarking..................………………….......………………...……… iii. Card Sorting..…………………………………...................................... iv. Propuesta de valor………………………........................................ b. Customer journey map………………...................................................... c. Buyer Persona………………………………………………...........................…..... d. Personas……….………………………………………….............................……….. e. Escenarios ………………………………………….............................…………….. f.Briefing……………………………………………..……………................................. 7 8 9 10 11 13 14 15 16 17 18 19 20 21 22 23 24 25 26 31 32 33 39 40 41 43 45 51 52 54 55 57 58 60
  • 4. 4 6. Diseño interfaz…………....…………………………………….............................. a.Funcionalidades..…………………………………………………..................…….. b. Flujos de interacción.…………………………………………................……..... c. Árbol de contenidos…………………………………………….…....................... d. Wireframe............................…………………………………………………………. e. Características interfaz final.............................................................. i. Tipografía.……………………..…….....................………….…............... ii. Copy .………………..…..………………................................................. iii. Gama Cromática......……………………..…….....................………… iv.Layout.….......................……………..…..………………....................... v.Botones......................………………..…..………………........................ vi.Iconografía................................................................................. vii. Icon App.................................................................................... f. Prototipo................................…………………………………...…….................. 7.Evaluación…………………………………………….............................…...………. a. Evaluación Heurística….………………………………….....................…….… b. Test de Usuarios…………………………………………………........................... i. Estructura del test.……………………..…….....................………….… ii. Resultados del test.………………..…..……………….....................… 1. Uso libre de la aplicación..…….…………................…….… 2. Tareas específicas ....…..…………………….….................... 3. Cuestionario final ..…..…………...………….................….… 8. Conclusiones..…………...………………………...............………….................... 9. Figuras..................................................................................................... 10. Bibliografía.……………………………………………………............................... 61 62 63 65 66 67 68 69 70 71 72 73 74 75 78 80 86 87 88 89 90 91 92 95 97
  • 5. 5 Diseño IU para aplicación móvil Helena Calva Oria
  • 6. “Reconocer una necesidad es la primera condición para comenzar a diseñar”. Charles Eames
  • 7. 7 Diseño IU para aplicación móvil Helena Calva Oria 1 INTRODUCCIÓN INTRODUCCIÓN INTRODUCCIÓN
  • 8. 8 Diseño IU para aplicación móvil Helena Calva Oria CONTEXTO a. CONTEXTO La tecnología ha sufrido un rápido avance en los últimos años, estando presente en prácticamente cualquier ámbito de la sociedad. Actualmente, se busca optimizar tiempos. Consumimos más rápido, nos desplazamos más rápido y, en definitiva, buscamos experiencias que nos permitan perder menos tiempo en asuntos que no nos atraen para poder dedicarnos a lo que real- mente nos interesa. Durante los últimos años, los smartphones han cambiado nues- tra forma de relacionarnos: ya no usamos el teléfono móvil solo para hablar, sino que también nos man- tenemos conectados a través de las redes sociales, lo utilizamos como cámara de fotos, reproductor de música, GPS, tarjeta bancaria... El avance de la tecnología durante las últimas décadas es un factor que ha permitido evolucionar de forma vertiginosa a la sociedad, propor- cionando soluciones inimaginables. ¿Quién creía hace 20 años que desde un móvil podríamos controlar lo que ocurre en nuestro domicilio? El mercado de las casas inteligentes, está creciendo un 25% cada año a nivel global, con los sistemas de acceso como máximo exponente [1]. La evolución del internet de las cosas (IoT)1 es una nueva revolución tec- nológica y los smartHome podrán facilitarnos más aún el día a día en los próximos años. 1 Abreviación del inglés Internet of things. El término IoT hace referencia a los sistemas de dispositivos físicos que reciben y transfieren datos a través de redes inalámbricas sin la intervención humana.
  • 9. 9 Diseño IU para aplicación móvil Helena Calva Oria DESCRIPCIÓN b. DESCRIPCIÓN Este proyecto consiste en el dise- ño UI/UX de un producto avanzado de aplicación para dispositivos con sistema operativo Android que faci- lite la gestión de diferentes accesos, permisos y comunicaciones. La motivación principal es desarro- llar una nueva versión de esta apli- cación para mejorar el prototipo que actualmente se ofrece, junto con un dispositivo con el que funciona: un smart intercom que permite abrir el portal, la puerta de tu casa, el garaje, un local…
  • 10. 10 Diseño IU para aplicación móvil Helena Calva Oria DEFINICIÓN c. DEFINICIÓN La aplicación a desarrollar permi- tirá que, como propietario, se cree una cuenta con las distintas puertas a administrar y se pueda gestionar la apertura de distintos accesos con este único mecanismo. También controlar quién y cuándo entra en el domicilio, pudiendo dar permisos temporales, ya sea por horas o por periodos. Además, si alguien toca el timbre y nadie se encuentra en casa, se recibirá una llamada o una notifi- cación en el smartphone, y se podrá abrir desde el móvil como si el usua- rio estuviera en el domicilio.
  • 11. 11 Diseño IU para aplicación móvil Helena Calva Oria JUSTIFICACIÓN d. JUSTIFICACIÓN Tras comprobar el creciente interés de los usuarios en este tipo de pro- ducto, y observando las carencias existentes en la oferta actual, se ha decidido desarrollar uno propio que aúne todos los posibles requeri- mientos de los usuarios y, aunque otras marcas ya están comerciali- zando su producto, se ofrece una solución centralizada única. Elaborar esta propuesta busca alcanzar que el producto final obte- nido sea de la suficiente consistencia y calidad como para salir al mercado a gran escala, ya que actualmente se está testeando en fase beta. Es decir, se busca cómo objetivo profesionali- zar la aplicación. De esta forma, se optimiza un pro- yecto personal que se lleva desarro- llando desde hace un par de años. La intención es mejorar la propuesta actual, ya que el producto está en el mercado (betatester), pero se espe- ra vender a gran escala. Para ello es necesario optimizarlo al máximo (y en un futuro a corto plazo crear la versión IOS). Esta es una gran oportunidad para realizar un enorme avance en el pro- ducto, ya que conseguir un resultado satisfactorio significa poder comen- zar a obtener mayores beneficios económicos. A día de hoy, se estima que habrá entre 40 y 50 mil millones de dispo- sitivos conectados a Internet. La hiperconectividad llevada a cifras como las que manejan las consulto- ras, aportando los siguientes datos: - General Electric prevé que la inversión en el Internet de Cosas (IoT), alcance los 60 billones de dólares durante los próximos 15 años. - McKinsey estima que el tamaño total del mercado de IoT en 2015 fue de hasta 900 millones de dóla- res, creciendo hasta los 3,7 billones en 2020 [2]. Partiendo de esta base, donde la domótica está creciendo exponen- cialmente en los últimos años, el fin es poder democratizar esta tec- nología, ofreciendo productos de calidad a un precio accesible. Esta aplicación, junto con el aparato que controla, pretende ser un primer dispositivo IoT que ayude a financiar el desarrollo de los siguientes. El impacto social que puede tener el avance y acceso a este producto es beneficioso tanto en términos particulares (hábitat mejorado, seguridad, sostenibilidad gracias a la eficiencia energética...) como en el aspecto laboral (aumento de
  • 12. 12 Diseño IU para aplicación móvil Helena Calva Oria productividad gracias a la automa- tización, optimización de recursos, reducción de costes, mayor seguri- dad, ...). La capacidad de obtención de datos continuos con sensores inteligen- tes permite actualmente que el IoT facilite tomar decisiones, o incluso realizar acciones como inyectar la cantidad adecuada de insulina a un paciente en un momento determi- nado [3], lo que abre un amplio aba- nico de posibilidades, por ejemplo, en el sector de la salud. Finalmente, destacar que la expo- sición tiene más relevancia al cen- trarse en la realización de un diseño propio y con futuro, como es el caso, y no en un prototipo ficticio. Es por ello que en este proyecto se pondrá en práctica la mayor cantidad de conocimiento posible para mejorarlo al máximo.
  • 13. 13 Diseño IU para aplicación móvil Helena Calva Oria HIPÓTESIS e. HIPÓTESIS Como la domótica está ganando mercado, la hipótesis se basa en diseñar una aplicación móvil para sistema android, ya que ninguna empresa actual ofrece tantas fun- cionalidades agrupadas que permi- ta al usuario realizar las siguientes opciones desde una sola interfaz: - Gestionar la apertura de distintos accesos con este único mecanismo. Controlar quién y cuándo entra en el domicilio. - Dar permisos temporales (ya sea por horas o por periodos). - Recibir una llamada o una notifi- cación si tocan el timbre de casa y no estás. Estas son solo las opciones para particulares, ya que el target inicial son los propietarios de viviendas, sin embargo (y debido a su flexibilidad y adaptación), también podrán usar la aplicación empresas de alquiler de instalaciones deportivas, espacios de coworking, pisos vacacionales, res- taurantes y hoteles, así como cual- quier negocio que necesite un regis- tro de la jornada laboral ordinaria en su empresa, obligatorio desde el 12 de mayo de 2019 y aprobado en el Real Decreto Ley 8/20192 ,1 que modifica el artículo 34 del Estatuto del Trabajador, añadiendo el apartado 9. 2 https://www.boe.es/eli/es/rdl/2019/03/08/8
  • 14. 14 Diseño IU para aplicación móvil Helena Calva Oria OBJETIVO f. OBJETIVO Se quiere conseguir aunar todas las funcionalidades ofrecidas por el producto en una aplicación completa y a su vez de uso sencillo, crean- do una estructura intuitiva para el usuario de la aplicación. Para lograrlo, los objetivos específi- cos en este proyecto son: - Reunir los conocimientos teóricos y prácticos adquiridos durante el grado de Diseño y Creación Digita- les y reflejarlos en el desarrollo del trabajo. - Aplicar las técnicas de Diseño Cen- trado en el Usuario para garantizar una óptima experiencia de usuario y comprobar la usabilidad en el pro- ducto a diseñar. - Adquirir nuevos conocimientos y experiencia sobre el diseño de UX en una aplicación. - Realizar una aplicación final de calidad. En este aspecto, el estudio se basa en los diseños de interfaz de dis- positivos de la competencia, que ya existen en el mercado pero que no reúnen todas las opciones que se quieren ofrecer.
  • 15. 15 Diseño IU para aplicación móvil Helena Calva Oria PALABRAS CLAVE g. PALABRAS CLAVE Aplicación Android Diseño Interfaz de usuario Experiencia de usuario Usabilidad Smartphone IoT Smarthome Interacción
  • 16. 16 Diseño IU para aplicación móvil Helena Calva Oria ABSTRACT h. ABSTRACT This project consists of the UI / UX design of an advanced application product for devices with Android operating system that facilitates the management of different accesses, permissions and communications. The main motivation is to develop a new version of this application to improve the prototype that is currently offered, together with a device with which it works: an inte- lligent intercom that allows you to open the portal, the door of your house, the garage, a room ...
  • 17. 17 Diseño IU para aplicación móvil Helena Calva Oria 2 PLANIFICACIÓN PLANIFICACIÓN PLANIFICACIÓN
  • 18. 18 Diseño IU para aplicación móvil Helena Calva Oria HERRAMIENTAS a. HERRAMIENTAS Para la planificación del proyecto se emplearán diferentes herramientas que ayudarán a desarrollar cada fase en un tiempo concreto, evitando la dispersión y optimizando el resultado. Inicialmente se creará un Diagrama de Gantt para controlar los tiem- pos, permitiendo así realizar un seguimiento de las diferentes etapas que tendrá el proyecto. Se intentará ajustar las etapas a la metodología y definir los timings, pero como se trata de un sistema ‘vivo’ y en desa- rrollo constante, se irá actualizando a medida que se vayan adelantando tareas, marcando hitos o añadiendo nuevos objetivos. Se emplearán en dos herramientas distintas: una será Monday.com, ya que permite recibir alertas por cada hito de cada fase; y officetimeline. com, recurso online con el que se diseñará el planning road map de una forma más visual, que permi- te ver la estructura y las fases de un solo vistazo. También se hará uso de Marvel App como herramienta de validación. De esta forma, al animar los wire- frames, la validación la harán los propios usuarios mediante un pro- totipo navegable. Para mantener acceso a los conteni- dos desde cualquier dispositivo con internet, la herramienta de Google Drive será el backup. Tambíen se realizará una encuesta a través de un formulario de Google Forms. Para aplicar la imagen la línea gráfi- ca a la aplicación se utilizará Adobe, principalmente Illustrator. Del mismo modo, el software con el que se montará el vídeo de la defensa final del proyecto será Premier, y la maquetación del documento final se realizará con InDesign.
  • 19. 19 Diseño IU para aplicación móvil Helena Calva Oria DAFO b. DAFO El análisis DAFO es una herramienta que forma parte del análisis estraté- gico de una compañía. Este análisis se basa en identificar y clasificar distintos factores, tanto internos como externos a la empresa, para poder ofrecer una visión global de la compañía. Sus siglas significan Debilidades, Amenazas, Fortalezas y Oportunida- des. Las debilidades y fortalezas son componentes internos de la com- pañía, mientras que las amenazas y oportunidades son factores externos. Figura 1
  • 20. 20 Diseño IU para aplicación móvil Helena Calva Oria TABLA RECURSOS c. TABLA DE RECURSOS Figura 2
  • 21. 21 Diseño IU para aplicación móvil Helena Calva Oria DIAGRAMAGANTT e. DIAGRAMA DE GANTT Figura 3
  • 22. 22 Diseño IU para aplicación móvil Helena Calva Oria TIMING f. TIMING Figura 4
  • 23. 23 Diseño IU para aplicación móvil Helena Calva Oria 3 METODOLOGÍA METODOLOGÍA METODOLOGÍA
  • 24. 24 Diseño IU para aplicación móvil Helena Calva Oria TÉCNICAS a. TÉCNICAS Puesto que se trata de un proyec- to que se ha de desarrollar en un periodo concreto de tiempo, se busca organizar los hitos con el uso de metodologías ágiles que permi- tan la optimización del proyecto de forma incremental. De esta forma, se obtienen versiones del prototipo más completas en cada avance, y permite analizar los resultados para mejorar en las siguientes fases. Figura 5 Se tendrá especial atención al entorno, por lo que se analizará a los usuarios para poder definir mejor los problemas que se encuentran al utilizar el diseño original, y se plan- tearán preguntas adecuadas que faciliten generar soluciones. Esto será plasmado en un briefing.1 3 El briefing es un documento informativo que brinda datos de utilidad para el desarrollo de una acción. sirve como punto de partida para una tarea.
  • 25. 25 Diseño IU para aplicación móvil Helena Calva Oria El proceso se focaliza en la meto- dología del Diseño Centrado en el Usuario (DCU)42 y el Design Thin- king5,3 realizando un mix de ambas modalidades para perfilar la aplica- ción de forma más eficaz. Inicialmente, se utilizará el proceso de Design Thinking, ya que comien- za con una etapa de información y comprensión, identificando las necesidades de los usuarios (perso- nas tipo) implicados en la solución que se quiere desarrollar. 1.Empatizar. A través de un estudio de mercado se realiza un análisis del cliente, detectando las principales necesidades del consumidor y com- prendiendo sus motivaciones. Para llevar a cabo esta exploración, hay interacción con el usuario a través de una encuesta. 2. Definir. Tras el estudio inicial, se definen cuáles son las necesidades del usuario, evaluando los posibles problemas detectados previamente. Al determinar las principales necesi- dades, se plantean las medidas para llegar a la solución definitiva. 4 El DCU es un término general para una filosofía y unos métodos que se centran en “diseñar para”, e invo- lucrar a usuarios en el diseño de sistemas informáticos. Consta de 6 sujetos que participan en el estudio y dichos usuarios pueden participar de distintas formas. 5 Design Thinking, en español, pensamiento de diseño, es una metodología o proceso que permite o facilita la solución de problemas, el diseño y desarrollo de productos y servicios de todo tipo y sectores, utilizando para ello la motivación, la innovación y creatividad como motores. 3. Idear. A través del pensamiento creativo, se trata de lanzar más de una idea para solucionar los proble- mas específicos que se identificaron en la fase previa. En este proceso de pensamiento divergente está permi- tido equivocarse, utilizando el pen- samiento libre. 4. Prototipar. Materializar las ideas seleccionadas. El prototipo se rea- lizará con materiales de bajo coste, creando un wireframe inicialmente. 5. Evaluar. Los clientes probarán y evaluarán el prototipo elaborado anteriormente. En base a sus impre- siones, se podrá deber hacer correc- ciones. Esta es la etapa de valida- ción crucial para descubrir errores y aciertos. Para complementar y perfeccionar el desarrollo, se une a este método de trabajo el Diseño Centrado en el Usuario, cuyas etapas generales de proceso son Indagación, Diseño y Evaluación, creando de esta forma un mix completo. La siguiente figura presenta los principales métodos agrupados según un proceso clásico del DCU: investigación y requisitos de usuario para definir el producto y su dise- ño, la creación y el desarrollo de la arquitectura de información y las maquetas, y la evaluación de los elementos diseñados.
  • 26. 26 Diseño IU para aplicación móvil Helena Calva Oria Figura 6 Para crear el DCU del proyecto se han definido las siguientes etapas: 1. Investigación: Se realizará un aná- lisis comparativo y encuestas. Es la etapa donde se empatiza con el usuario. 2. Definición: Se crearán “personas tipo” para representar a los potencia- les usuarios. 3. Ideación: En base a los usuarios definidos, se describirán los objetivos y elementos clave que deberán estar presentes en el prototipo a diseñar. 4. Prototipado: Se definirá la arqui- tectura de la información y se elabora- rán los diagramas de flujos. Posteriormente se diseñarán wirefra- mes y prototipos navegables para ser testeados. 5. Validación: Se llevarán a cabo tests con usuarios reales para identificar problemas y extraer resultados que verifiquen el éxito del prototipo. Planificación
  • 27. 27 Diseño IU para aplicación móvil Helena Calva Oria 6. Diseño visual: Finalmente, se aplicará el estilo visual al prototipo. Como se puede comprobar, ambos sistemas tienen puntos en común, por lo que el mix de ambos permite generar un resultado más optimizado.
  • 28. 28 Diseño IU para aplicación móvil Helena Calva Oria METODOLOGÍA b. METODOLOGÍA Para optimizar el progreso del pro- yecto se utilizará el desarrollo itera- tivo e incremental, de esta forma se obtendrán versiones evolutivas del prototipo cada vez más completas, con resultados que permitirán anali- zar y mejorar las siguientes fases. Figura 7
  • 29. 29 Diseño IU para aplicación móvil Helena Calva Oria Además, a través de las metodolo- gías se contará con la participación de usuarios para el diseño y testeo de la aplicación. Esta conjunción ofrece como resultado una versión incre- mentada del producto que está en construcción. Esta metodología ayudará a planifi- car las acciones que se deben realizar en cada momento y está compues- ta por una serie de fases de diseño. Como se muestra en la figura 7, estas etapas no se realizan de forma sucesiva, sino que son iterativas y, conforme se vaya avanzando en el trabajo, se puede regresar a la fase anterior las veces que sea necesario, hasta que se pueda asegurar que el resultado final obtenido se corres- ponde con el objetivo de proporcio- nar la mejor experiencia de usuario.
  • 30. 30 Diseño IU para aplicación móvil Helena Calva Oria VALIDACIÓN c. VALIDACIÓN Tras el estudio inicial, se efectuarán una serie de preguntas a distintos perfiles de usuarios a través de una encuesta. Esta se realizará preferi- blemente cara a cara, para detectar las necesidades del usuario. La validación la realizarán los pro- pios usuarios en los que participa- rán en una interacción de uso. Estas pruebas se realizarán utilizando Marvel App, donde se generará un prototipo navegable y testable. Una vez realizada la comprobación, se utilizará el feedback de los usuarios para redefinir la interfaz a través del sistema Card Sorting de la plataforma optimalworkshop.com, que permitirá generar el diseño final.
  • 31. 31 Diseño IU para aplicación móvil Helena Calva Oria 4 INVESTIGACIÓN INVESTIGACIÓN INVESTIGACIÓN
  • 32. 32 Diseño IU para aplicación móvil Helena Calva Oria ANTECEDENTES a. ANTECEDENTES La primera aparición de un desa- rrollo de Interfaz Gráfica de Usua- rio (GUI) fue gracias a Xerox PARC en 1970. Es Bob Taylor (psicólogo e ingeniero) el pionero en aplicar los criterios de «Diseño centrado en el usuario», para la formación de los productos tales como el Mouse, los Checkbox, los Radiobutton, la Inter- faz Gráfica GUI, entre otros [4]. En 1983, Donald A. Norman, profe- sor de la Northwestern University y cofundador de Nielsen Norman Group, comienza a utilizar el tér- mino User Centered System Design. Observaba cómo la gente usaba los sistemas y creaba sus propios mode- los mentales a partir de los procesos de interacción. Tres eran los térmi- nos que debían ser valorados para entender estos procesos: El modelo conceptual (ofrecido por el diseña- dor del sistema); interfaz (la imagen que el sistema presenta al usuario); y el modelo mental (desarrollado por el usuario a partir de la imagen). Esta fase es una de las más impor- tante del proceso, ya que establecerá las bases sobre las que se va a reali- zar el diseño del producto final, en este caso el prototipo de una apli- cación para dispositivos móviles Android. Según la planificación establecida, se inicia este apartado analizando los fundamentos del diseño móvil, y en concreto la interfaz de los dispo- sitivos para los que se va a desarro- llar el producto. A continuación, se ejecutará un estudio de aplicaciones con carac- terísticas y funcionalidades simi- lares a la nuestra (benchmarking). Se analizará, entre otros elementos, sus funcionalidades, su facilidad de uso, la interacción con el usuario o el coste de la aplicación, para pos- teriormente establecer las caracte- rísticas iniciales que se desean en la nueva aplicación. Por último, se hará un test de usua- rios para valorar el contexto de uso de este tipo de herramienta.
  • 33. 33 Diseño IU para aplicación móvil Helena Calva Oria FUNDAMENTOS b. FUNDAMENTOS A diferencia del diseño de aplicacio- nes para ordenadores personales, en los que existe la posibilidad de inte- ractuar desde diferentes periféricos de entrada, como teclado (mediante lenguaje escrito, códigos y coman- dos) o ratón (mediante el movi- miento de un puntero), los disposi- tivos táctiles ofrecen una interacción más directa, sin dispositivo inter- medio, ya que el usuario se relaciona directamente con el contenido. Este enfoque diferente, se puede resumir en la frase: “Diseñar para tocar”. Para la realización del diseño de este tipo de aplicaciones móviles, es nece- sario tener en cuenta las siguientes limitaciones: Tamaño de elementos: Al desarro- llar una aplicación para smartphones, que son dispositivos táctiles donde la acción central del usuario será la de tocar la pantalla del dispositivo e inte- ractuar con él, se ha de considerar de especial importancia respetar el tama- ño de los elementos que se diseñen y tener en cuenta el mínimo sobre el que se tiene constancia del que pueden surgir problemas. Figura 8 En la figura 8 se pueden ver los tamaños promedio que se sugiere respetar en el diseño de interfaces. Se recomienda que las zonas tácti- les tengan 9mm para que se pueda producir una acción segura, es decir, que se lleve a cabo sin error la acción que el usuario quiere provocar en la pulsación de la pantalla con el dedo.
  • 34. 34 Diseño IU para aplicación móvil Helena Calva Oria En caso que no sea posible por temas de espacio, se recomienda que míni- mo la zona táctil sea de 7 mm, aun- que puede haber casos en los que sea imposible introducir zonas táctiles de ese tamaño, por lo que sólo en casos excepcionales en los que no haya espacio suficiente sea aconse- jable la utilización de una zona táctil de 5 mm. Es importante tener en cuenta que el espacio mínimo entre zonas táctiles sea siempre de 2mm, es decir, en todos los casos anteriormente mencionados. Figura 9 En la figura 9 se observan datos similares en otra medida, más indi- cada a la hora de diseñar en alta fidelidad. Se recomienda crear con- troles que midan al menos 44x44 puntos para que puedan ser pulsados eficientemente con un dedo.
  • 35. 35 Diseño IU para aplicación móvil Helena Calva Oria A continuación, esta gráfica de Microsoft demuestra la importan- cia de los tamaños, ya que muestra como el porcentaje de fallos en la interacción con elementos de menos de 5mm sube exponencialmente. Figura 10 En el caso específico de la aplicación que se va a desarrollar, se tiene en cuenta que el público objetivo al que va dirigida son personas habituadas al uso diario de este tipo de disposi- tivos, por lo que se da por supuesto que tienen adquiridas las destrezas necesarias para un uso normal de la interfaz.
  • 36. 36 Diseño IU para aplicación móvil Helena Calva Oria Figura 11
  • 37. 37 Diseño IU para aplicación móvil Helena Calva Oria Zonas de interacción: Es importan- te además tener en cuenta la forma en la que cogemos el móvil, ya que puede condicionar totalmente el diseño de nuestra interfaz. Según un estudio [6] realizado sobre 1.333 personas en 2013 el 49% de ellas lo utiliza habitualmente con una sola mano. Si analizamos esta forma de utilización, nos damos cuenta de que damos la posibilidad de acción tan sólo al dedo pulgar. Figura 12 Esta figura muestra las zonas de interacción del dedo pulgar, clasi- ficando en colores la facilidad con la que el usuario puede interactuar en ella. El color verde indica que se puede acceder con naturalidad, el naranja la zona donde es más difícil llegar, y el rojo donde probablemen- te resulta muy complicada la inte- racción con los elementos. La conclusión con respecto a estos datos es que se debe tener en cuenta esas zonas para el tamaño, la posi- ción y la disposición de los elemen- tos, como por ejemplo situar en las zonas verdes los elementos de mayor uso y en las zonas rojas los de menos uso o los que pueden inducir a error.
  • 38. 38 Diseño IU para aplicación móvil Helena Calva Oria Destacar que las pantallas de los smartphones han aumentado y lo siguen haciendo, hecho que influye directamente en el hábito de uso de estos dispositivos. Se estima que en el año 2021 los Smartphones más utilizados serán los de pantallas de entre 5,5” y 6” [7]. Figura 13
  • 39. 39 Diseño IU para aplicación móvil Helena Calva Oria TENDENCIAS c. TENDENCIAS El sistema visual Material Design, normativa que Google anunció en 2014, ha marcado tendencia en el mundo del diseño de interfaces, con- virtiéndose en una destacada corriente estilística en la actualidad [8]. Sus tres principios son: - La metáfora de los materiales. Utilización de capas, bordes, relieves, sombras, profundidad… para reprodu- cir el aspecto y los efectos visuales que generan las superficies de los objetos en la realidad. - Jerarquía. Escalar a través del uso de tipografías, cuadrículas, espa- cio y color, facilitando de esta forma diferenciar y focalizar el contenido y ayudando al usuario a entender más rápidamente, por ello cada espacio en blanco y cada contraste tiene su justi- ficación y permite crear una jerarquía visual. - Movimiento. Se añade para que la interacción resulte fluida, natural y agradable. Para ello, las animaciones generadas en la UI deben ser significa- tivas. En 2012 aparece ‘Metro’, de Win- dows [9], que derivará en el estilo Flat Design (o Diseño Plano), un tipo de diseño que incrementa la simplicidad de las interfaces. Consiste en suprimir o reducir todo tipo de decoración en un diseño de interfaz para simplificar el mensaje y facilitar la funcionalidad [10]. Se eliminan texturas, degra- dados, biselados, sombreados… Sin embargo, el hecho de eliminar cual- quier tipo de efecto tridimensional a los controles puede perjudicar el affordance1, es decir, “aquellas pro- piedades perceptibles del objeto que determinan cómo puede ser usado” [9], y por tanto provocar que el usuario no perciba cómo debe ser utilizada la interfaz (por ejemplo, que no perciba que un botón es accionable). La tendencia general apunta hacia diseños simples, personalizados, fáciles de entender y orientados a guiar al usuario para que realice cier- tas acciones. La posible masificación del Internet de las Cosas y el aumento de la navegación a través dispositivos wearables2 que permiten la movilidad (smartphones, tablets, phablets, smar- twaches…) seguirán impulsando estos cambios. 6 James J. Gibson en 1977, describió ‘affordance’ cómo “Todas las posibilidades que materialmente ofrece un objeto para reconocer cómo usarlo”. El concepto fue introducido en el contexto del diseño de interacción por Norman y se refiere a “aquellas propiedades perceptibles del objeto que confieren al diseño un aspecto autoexplicativo e intuitivo, haciendo obvio y explícito cómo debe ser usado y con qué objetivos”. 7 Wearables: dispositivos electrónicos inteligentes incorporados a la vestimenta o usados corporalmente como implantes o accesorios que pueden actuar como extensión del cuerpo o mente del usuario. 6 7
  • 40. 40 Diseño IU para aplicación móvil Helena Calva Oria DESARROLLO DESARROLLO DESARROLLO 5
  • 41. 41 Diseño IU para aplicación móvil Helena Calva Oria INVESTIGACIÓN a. INVESTIGACIÓN Para el desarrollo de la investiga- ción, se ha indagado en los fun- damentos del diseño móvil actual, profundizando en los requisitos para un buen uso del espacio, en las dife- rentes formas de interacción táctil y en otros factores importantes. Como la herramienta se basa en el sistema operativo Android, se han analizado los elementos nativos de este siste- ma y las diferentes resoluciones para las que se diseña. En ese contexto, se ha hecho un estudio de merca- do de apps similares que existen actualmente, investigando las fun- cionalidades que ofrecen cada una de ellas, la interacción con el usua- rio, su diseño, facilidad de uso, coste, etc. A continuación, se formu- larán una serie de entrevistas para evaluar las ideas iniciales: entrevis- tando a distintos perfiles de poten- ciales usuarios de la herramienta, con la idea de profundizar en el contexto de hábitos y necesidades. Por último, en esta fase, se efectúa un test de usabilidad con alguna de las herramientas del benchmarking y así se comprobarán las funcionali- dades. En lo referente al inicio de la fase de diseño, se han investigado las nece- sidades de acceso en distintos esce- narios para añadir en la aplicación aquellas que puedan resultar inte- resantes. Una vez analizados estos datos, se han establecido los requisi- tos iniciales que debe cumplir la nueva aplicación que se va a diseñar, y que conforme se vaya avanzando en el tra- bajo con los usuarios, se irán comple- tando, ya que será un proceso iterativo. El siguiente paso es definir una serie de escenarios de uso de la herramienta, para analizar en más detalle los proce- sos y procedimientos que debe llevar a cabo el usuario para interactuar con la herramienta. Esos escenarios de uso se complementarán con diagramas de flujos de interacción, necesarios a la hora de definir la interacción con la herramienta, y parte fundamental en el diseño. Por último, se enfocará el diseño del prototipo de la aplicación, realizando inicialmente un proceso de bocetaje de las diferentes pantallas en borrador (wireframes), para posterior- mente prototipar. Una vez creadas todas las pantallas necesarias, se generará una simulación. En la fase de evaluación se efectuarán una serie de pruebas para valorar ciertos aspectos del prototipo realizado con anterioridad: usabilidad, eficiencia, satisfacción del usuario... Inicialmente, se llevarán a cabo test con usuarios, aunque no se descarta utilizar otros métodos de inspección según la infor- mación obtenida en los resultados. Se considera realizar la evaluación heu- rística que propone Jakob Nielsen [11],
  • 42. 42 Diseño IU para aplicación móvil Helena Calva Oria al tratarse de un referente en el sector de la usabilidad. Por último, se recuerda que todas y cada una de estas fases que se analicen por separado, se trabajarán de forma iterativa, por lo que muy probable- mente no sigan un orden de trabajo específico.
  • 43. 43 Diseño IU para aplicación móvil Helena Calva Oria i. Entrevista a usuarios A continuación se reflejan las pre- guntas realizadas a los posibles usuarios durante el estudio y sus resultados. Para esta encuesta se ha utilizado un formulario de Google Forms con preguntas abiertas. La finalidad ha sido conseguir obte- ner la mayor información directa acerca del interés que suscita la apli- cación a los entrevistados. Se han realizado un total de 52 encuestas a diferentes perfiles. Figura 14
  • 44. 44 Diseño IU para aplicación móvil Helena Calva Oria Figura 15 Figura 16
  • 45. 45 Diseño IU para aplicación móvil Helena Calva Oria ii. Benchmarking En este apartado se dan a conocer otras aplicaciones existentes en el mercado, de esta forma se puede realizar una aproximación de cómo se posicionaría el nuevo producto con respecto a sus potenciales com- petidores. A continuación, se indican algunas de las que disponen de funcionalida- des similares a las que contendrá la nueva aplicación diseñada.
  • 46. 46 Diseño IU para aplicación móvil Helena Calva Oria HOMYHUB: HOMYHUB permite abrir el garaje desde el smartphone, controlando, monitoreando y gestionando los accesos. Precio: 135 € Fabricante: HomyHub Versión: 1.5.6 Características: - Orientada a chalets, comunidades de vecinos o empresas. - Activación en unos minutos, sin necesidad de conocimientos técnicos. - Se adapta a cualquier automatismo o motor de garaje, ya sea una puerta, barrera, cancela o persiana. - Usuarios ilimitados pueden usar la aplicación enviando “Mandos Virtuales”. - Compartir acceso al garaje “a medida”: permanente o específico por meses, días, horas.... - Monitorización de quién y cuándo se accede al garaje en tiempo real. - Monitorización si la persiana o puerta de garaje está abierta o cerrada. - Funciona simultáneamente con mandos o llaves de garaje tradicionales. Figura 17
  • 47. 47 Diseño IU para aplicación móvil Helena Calva Oria RING: Responder notificaciones y verificar el hogar en tiempo real. Pertenece a Amazon. Gestiona llamadas y aperturas pero está muy orientado a EEUU. Precio: desde 99€ Fabricante: Ring.com Versión: 3.32.1 Características: - Desde el sistema IOS permite: revisar eventos, configurar un nuevo dispositivo, cambiar la configuración, vigilar la casa con los timbres de vídeo y las cámaras de seguridad conectadas a Wi-Fi. - Envía alertas instantáneas cuando las personas presionan el timbre o activan los sensores de movimiento incorporados. - Cuando responde a la alerta, puede ver, escuchar y hablar con cualquier per- sona que se encuentre en su propiedad desde su iPhone, iPad o Mac. - Permite vigilar desde cualquier lugar y la conversación bidireccional. Figura 18
  • 48. 48 Diseño IU para aplicación móvil Helena Calva Oria AUGUST HOME: Apertura a través de wifi y bluetooth. Cerradura que funciona con un motor que desliza el pestillo. Orientado a USA. Precio: ~200€ Fabricante: August Home Inc. Versión: 10.15.0 Características: - Permite que entren las personas adecuadas: familia, amigos e incluso proveedores de servicios. Este sistema de acceso ofrece el control de la puerta principal, sin importar dónde se encuentre, desde su teléfono inteligente. - Utilizar la cerradura sin una llave física. - Crear claves virtuales para familiares e invitados. - Otorgar acceso para fechas y horarios específicos. - Desbloqueo y bloqueo automático de la puerta al salir y entrar. - Control de forma remota desde cualquier lugar - Feed de la actividad 24/7. - Recibe alertas cada vez que alguien toca tu timbre. - Ver y hablar con los visitantes que se encuentren en la puerta de casa. - Abrir la puerta a los invitados mientras se habla. - Ver actividad registrada en la puerta. Figura 19
  • 49. 49 Diseño IU para aplicación móvil Helena Calva Oria EQIVA LOCK: Distribuyen a través de varios portales web especializados, así como en Ama- zon. No distribuyen a través de su propia web. Precio: ~90 € Fabricante: eQ-3 AG Versión: 1.3.0 Características: - Eqiva Bluetooth permite el bloqueo de puerta, desbloquear y abrir a través de la aplicación. Los perfiles de acceso individuales proporcionan un control de acceso óptimo al hogar. - La puerta principal se puede bloquear automáticamente gracias al cierre temporizado. - Funciona hasta en ocho teléfonos y también se puede configurar y controlar hasta ocho Eqiva. - La llave convencional permanece funcional. - Dispone de opciones de control e información del estado del dispositivo. - Configuración de los perfiles individuales de acceso y permite a terceros el acceso sólo en ciertos días, dentro de ciertos períodos. Figura 20
  • 50. 50 Diseño IU para aplicación móvil Helena Calva Oria Otras aplicaciones IoT a destacar que permiten la apertura de accesos son: Raixer: Hay que añadir un disposi- tivo a tu telefonillo que solo abre la puerta del portal y de la vivienda. No me convence nada las cerraduras de la vivienda que ofrecen. Precio: 119€. Se enfocan especialmente en aparta- mentos de alquiler tipo Airbnb, por lo que uno de sus canales de distri- bución son las propias plataformas. Disponen de venta online en página propia y red de distribuidores (se apuntan desde su web). El artículo aparece en Amazon pero sin dispo- nibilidad actual. Nello: Mismo concepto que Raixer, pero con mejor diseño y mayor interoperabilidad con cerraduras inteligentes. Precio: ~129€. Es una empresa alemana, por lo que se des- conoce si tiene distribuidores loca- les. En España solo se distribuyen a través de canales online. Venta a tra- vés de su web de su solución para el portal junto con otras de otros pro- veedores partners (Danalock, Yale, SimonsVoss y Nuki). Disponible en Amazon. Nuki: Tienen una red de distribui- dores minoristas propia. Distribuyen en grandes plataformas en varios países de Europa. En España desde Leroy-Merlin y en Alemania desde Media Markt y la propia e-on. Tam- bién distribuyen a través de su pági- na web y Amazon. Disponen de dife- rentes formatos. Goliath: Similar a Ring, pero permi- te apertura por RFID. Precio: 180€ KONX: Parecido a Ring con una fun- ción para abrir puertas inalámbricas. Precio: 150€. SHEMSINZ: Parecido a los anterio- res, pero con sistema de cableado más similar a los tradicionales. Pre- cio: 130€. Homeit: Empresa de instalación de soluciones integrales enfocada a Airbnb.
  • 51. 51 Diseño IU para aplicación móvil Helena Calva Oria iii. Card Sorting Para abordar este apartado se ha uti- lizado el programa online Optimal Workshop, ya que permite lanzar encuestas de card sorting online de forma gratuita hasta un máximo de 10 personas. Se ha inventariado los recursos que debe tener la nueva aplicación para resultar útil para el usuario y se han definido en los siguientes: Figura 21 Como conclusión podemos extraer que no hay cambios muy relevantes en las respuestas de los participantes.
  • 52. 52 Diseño IU para aplicación móvil Helena Calva Oria iv. Propuesta de Valor La propuesta de valor que ofrece el desarrollo de este proyecto y la aplicación resultante del mismo es democratizar las ventajas de la utili- zación del IoT para el mayor número de usuarios, empleando como base la interconexión de dispositivos mediante internet y la interacción objeto-internet. Esta aplicación domótica pretende, junto con el producto que funciona, generar una nueva forma de control de accesos total de forma centralizada, actual- mente inexistente en el mercado.
  • 53. 53 Diseño IU para aplicación móvil Helena Calva Oria Figura 22
  • 54. 54 Diseño IU para aplicación móvil Helena Calva Oria JOURNEY MAP b. CUSTOMER JOURNEY MAP Figura 23
  • 55. 55 Diseño IU para aplicación móvil Helena Calva Oria BUYER PERSONA c. BUYER PERSONA A continuación se reflejan las pre- guntas realizadas a los posibles usuarios durante el estudio y sus resultados. Para esta encuesta se ha utilizado un formulario de Google Forms con preguntas abiertas. La finalidad ha sido conseguir obte- ner la mayor información directa acerca del interés que suscita la apli- cación a los entrevistados. Se han realizado un total de 52 encuestas a diferentes perfiles. FRANCISCO PÉREZ (Informático en el Ayuntamiento) Behaviours: - Trabaja de mañana - Tiene una persona para realizar las labores del hogar - Aficionado al running, la escalada y el ciclismo - Le apasionan las nuevas tecnolo- gías - Disfruta probando nuevos gadgets Recibe múltiples visitas familiares en su domicilio Facts & Demographics: - Padre trabajador - 46 años - Vive en Liencres - Trabaja en Hoznayo - Casado - Tiene una hija - Sueldo: 30.000 €/año
  • 56. 56 Diseño IU para aplicación móvil Helena Calva Oria Needs & Goals: - Tener más tiempo para sus aficiones - Gestionar quién cuida a su hija cuando su mujer y él trabajan - Terminar de reformar su vivienda - Deshacerse de las múltiples llaves que abren todas las cerraduras de su casa (valla exterior, puerta principal, puerta trasera, garaje...). Escenario 1: Poder realizar deporte sin llevar las llaves encima. Francisco Pérez sale a correr cada mañana y no quiere llevar el móvil encima. Para ello ha instalado el portero automático inteligente y la aplicación que lo gestiona. Dicha aplicación dispone de una función de “Asistente Virtual” que está activa- da. Al regresar de correr, Francisco Pérez toca en el timbre, espera unos segundos y una voz automática le pide las posiciones 3 y 6 de su clave numérica. Da el código por voz y la puerta se abre. Escenario 2: Poder permitir el acceso puntual a su primo, que ha ido al domicilio antes de llegar él del trabajo. Francisco Pérez recibe una llamada de su primo cuando aún se encuentra en el trabajo. Ha llegado ya al domicilio y no quiere esperar fuera, pues serían al menos 30 minutos en la calle. Francisco Pérez entra en la aplicación y, en remoto, le da acceso de forma instantánea una sola vez y “en tiempo real” sin tener que registrar un nuevo usuario, ya que el acceso ha sido registrado como apertura de Francisco Pérez “a distancia”.
  • 57. 57 Diseño IU para aplicación móvil Helena Calva Oria PERSONAS d. PERSONAS Figura 24
  • 58. 58 Diseño IU para aplicación móvil Helena Calva Oria ESCENARIOS e. ESCENARIOS Usuario: MARÍA ISABEL GONZÁLEZ Escenario 1: Registrarse como nuevo usuario y dar acceso a quien ayuda a su hijo con los deberes por las tardes. María Isabel González es una mujer de 42 años de edad, madre traba- jadora que ha comprado un nuevo portero inteligente que va asociado a una aplicación. Dentro de la caja del producto viene una tarjeta con un código QR. Con la cámara de su smartphone apunta y directamen- te se abre la opción de descargarla al teléfono móvil desde la tienda Google Play. Una vez descargada y desde la pantalla inicial, selecciona la opción “Registro”. En esta panta- lla se ofrecen una serie de opciones para el registro como introducir un e-mail y una contraseña, o realizar un registro automático conectando su cuenta de google a la aplicación. Escoge la opción de registro por usuario y contraseña y pulsa “Acce- der”. Aparece una pantalla de con- figuración inicial donde se pide la clave wifi para poder conectar el dis- positivo a la red, también se ofrece la vinculación a través de bluetooth. Una vez dada de alta en la aplicación, da acceso a la persona que da clases particulares a su hijo diariamente por las tardes. Para ello registra su mail y delimita los accesos a la franja horaria contratada. Escenario 2: María Isabel González debe recibir una entrega y el reparti- dor pasa por su zona cuando lleva a su hijo al colegio, por lo que no estará en casa para abrir la puerta al mensajero. María Isabel González abre la app, programa un aviso para el día pre- visto de la entrega, la aplicación genera un código que se envía al mensajero. El mensajero cuando llega a la casa introduce el código en la aplicación, María Isabel Gon- zález recibe el aviso de “permiso para acceder”, revisa el código y comprueba que es el mensajero, y finalmente da permiso para abrir la puerta. El mensajero entra, deja el paquete, y cuando sale vuelve a introducir el código. María Isabel González recibe la alerta de salida, revisa que el mensajero ha salido y comprueba que la puerta queda correctamente cerrada.
  • 59. 59 Diseño IU para aplicación móvil Helena Calva Oria Usuario: MANOLO GÓMEZ Escenario 1: Manolo Gómez quiere poder alquilar sus pisos en Airbnb sin tener que desplazarse para la entrega de llaves, ya que los tiene en distintos puntos de su comunidad y pierde mucho tiempo en ello. La aplicación se vincula con la API de la plataforma de Airbnb directa- mente, por lo que Manolo Gómez, como propietario y administrador, no tiene que estar pendiente de los accesos de sus pisos, simplemen- te los inquilinos se descargan la aplicación y pueden entrar al piso alquilado durante todo el periodo de vacaciones, por lo que ninguno tiene que ir a recoger ni entregar las lla- ves físicamente, ahorrando tiempo y ganando en comodidad. Escenario 2: Los huéspedes de Manolo Gómez se han ido ha pasar todo el día fuera y se han quedado sin batería en el móvil para poder entrar en el piso. Tampoco tienen el número de su arrendador para poder comunicarse con él. Cuando llegan al piso alqui- lado llaman al telefonillo. Mano- lo Gómez recibe una llamada del mismo, y puede hablar a través de su teléfono con el portero. Los inqui- linos pueden acceder al piso porque Manolo Gómez, tras comprobar que son ellos, les abre en remoto de forma puntual. Usuario: PILAR FERNÁNDEZ Escenario 1: Pérdida y olvido de lla- ves en reiteradas ocasiones. Pilar Fernández ha cambiado las llaves clásicas para poder abrir con el móvil, sobretodo a petición de sus hijos, ya que cada vez que perdía u olvidaba las llaves era un trastorno para todos. Ahora, si Pilar Fernán- dez sale de casa sin llaves, al llamar al telefonillo contesta cualquiera de sus hijos, que le abren el domicilio en remoto. Además, esta aplicación permite que cualquiera de sus hijos, parejas o nietos puedan visitarla sin tener que cambiar el bombín, cosa que debía hacer cuando perdía las llaves y que suponía un coste eco- nómico, ya que todos ellos pueden acceder a través de la aplicación. Escenario 2: Se va de viaje con el imserso y tiene un gato. Durante su periodo vacacional, autoriza a su vecina para que pueda entrar en el piso a dar de comer al gato, y mantiene el control porque puede comprobar en el registro de accesos las aperturas realizadas.
  • 60. 60 Diseño IU para aplicación móvil Helena Calva Oria BRIEFING f. BRIEFING Tras la información recopilada, se tendrá en cuenta los siguientes pun- tos indispensables para generar un correcto diseño de la interfaz: - Conocer la diversidad de formatos de pantalla de los smartphone. - Estructura de contenidos lo más plana posible, con muchas opciones y pocos niveles. Organización del contenido de manera simple y clara. - Habilitar la opción de ‘hacia atrás’ y mantener un acceso permanente a las opciones principales de nave- gación. - Alto contraste entre fondo y con- tenido. - Interacción directa en la pantalla mediante los dedos. - Mantener la coherencia en la ali- neación de los elementos y del texto. - Tipografía sans-serif optimizada para pantallas a baja resolución para garantizar la legibilidad del texto. - Mantener la misma paleta de colores en la aplicación. - Utilizar iconos reconocibles, que sean fáciles de identificar y significar. Además, para garantizar una buena experiencia de usuario, también se evitará introducir funcionalidades que todavía no estén disponibles o que fallen para no crear confusión y frustración al usuario. Actualmente es evidente que exis- te una demanda exponencial de soluciones de este tipo, sobretodo motivado por alquiler de viviendas a través de plataformas tipo Airbnb1 . Como posible oportunidad, destacar que las soluciones existentes son caras y no resuelven por separado todos los problemas de los clientes de forma integral. También es signi- ficante que la competencia no utilice los canales de venta y distribución habituales, confiando todo su activo a la venta online. 8 Airbnb: Plataforma online que, a través de Internet, pone en contacto a personas que quieren ofrecer sus viviendas en alquiler, con huéspedes que necesitan alojamientos temporales. Su función es de intermediario entre ambas partes. 8
  • 61. 61 Diseño IU para aplicación móvil Helena Calva Oria DISEÑO INTERFAZ DISEÑO INTERFAZ DISEÑO INTERFAZ 6
  • 62. 62 Diseño IU para aplicación móvil Helena Calva Oria FUNCIONALIDADES a. FUNCIONALIDADES A continuación, se indican las fun- cionalidades que se implementarán en el prototipo y que se analizarán en más detalle en los ejemplos de los casos de uso del siguiente apartado. Las principales funcionalidades son: - Registro de usuarios: Los usua- rios deben registrarse con una cuen- ta mail y una contraseña. - Buscador: Para localizar una cerradura concreta entre todas a las que tenga acceso el usuario. - Permisos: A través de una opción del menú principal, los usuarios tienen la posibilidad de gestionar los permisos, ya sean habituales o tem- porales. - Registro de accesos: Ofrece la información de todas las apertu- ras, hora de acceso y usuario que ha abierto. - Instalación: Guía para la instala- ción del dispositivo físico, configu- ración a través del wifi de la casa y se añade como administrador principal al usuario que lo instale. - Configuración: Permite elegir el color de la tarjeta, el nombre del domicilio, imágenes y nombre de cada acceso individual (garaje, por- tal, puerta principal)... - Chat de asistencia: Chat inter- no para ponerse en contacto con el servicio técnico si surge algún pro- blema. - Llamadas: Pantalla que aparece al recibir una llamada o videollamada desde el portero.
  • 63. 63 Diseño IU para aplicación móvil Helena Calva Oria F.DEINTERACCIÓN b. FLUJOS DE INTERACCIÓN Los escenarios planteados anteriormente marcan la pauta para desarrollar los flujos de interacción, versión que muestran los pasos a seguir para llegar al fin deseado por los sujetos tipo. En las siguientes páginas aparecen los resul- tados obtenidos: Figura 25
  • 64. 64 Diseño IU para aplicación móvil Helena Calva Oria Figura 26
  • 65. 65 Diseño IU para aplicación móvil Helena Calva Oria A.DECONTENIDOS c. ÁRBOL DE CONTENIDOS El árbol de contenidos permite definir la estructura que tendrá el proyecto final. Tras la investigación realizada, se ha obtenido el siguiente resultado: Figura 27
  • 66. 66 Diseño IU para aplicación móvil Helena Calva Oria WIREFRAME d. WIREFRAME En este punto es necesario plasmar todo el conocimiento recogido en las fases anteriores en un modelo visual del sistema a diseñar, realizando un prototipado en baja fidelidad o “wireframe” con la idea de, poste- riormente, obtener un prototipo en alta fidelidad totalmente navegable. Se simularán algunas partes del sistema final, que ayuden a realizar pruebas sin la necesidad de tener un desarrollo completo de la aplicación. Para ello, se desarrollarán ciertas funcionalidades que todo usuario debería poder completar con poca o muy poca ayuda, de tal forma que se obtenga una idea lo más fiel posible a la realidad de la interacción que los usuarios harán de la herramienta. Se ha optado inicialmente por rea- lizar prototipos en baja fidelidad debido a la facilidad de bocetar- los rápidamente en papel sin tener conocimientos de ninguna herra- mienta de prototipado.
  • 67. 67 Diseño IU para aplicación móvil Helena Calva Oria C.INTERFAZFINAL e. CARACTERÍSTICAS INTERFAZ FINAL En el siguiente apartado se detalla- rán las diferentes tomas de decisio- nes respecto al diseño de la interfaz de aplicación final.
  • 68. 68 Diseño IU para aplicación móvil Helena Calva Oria i. Tipografía La tipografía se utiliza para crear jerarquías claras y para guiar a los usuarios a través la experiencia y del producto. Esta es la estructura cen- tral de cualquier interfaz bien dise- ñada. En este caso la escala, el peso y la organización se han tenido en cuen- ta para desarrollar la interfaz de usuario del producto. La familia tipográfica elegida es Lato, en su peso regular y bold. ABCDEFGHIJKLMNÑOPQRSTUVWXYZ ,.¡!¿? abcdefghijklmnñopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNÑOPQRSTUVWXYZ ,.¡!¿? abcdefghijklmnñopqrstuvwxyz 1234567890 Para la jerarquía de los textos se han utilizado distintas dimensiones. - Encabezados a 42 px. - Títulos de sección a 35 px. - Resto de texto 32 px. Utilizando la tipografía de esta manera se establece una interfaz equilibrada e intuitiva.
  • 69. 69 Diseño IU para aplicación móvil Helena Calva Oria ii. Copy El estilo de escritura es breve, sencillo, conciso y preciso. Se utilizan palabras cortas, verbos acti- vos y el formato directo en la comuni- cación, consiguiendo que el usuario se sienta seguro navegando por la interfaz. El tono es informal y coloquial, evitando confundir.
  • 70. 70 Diseño IU para aplicación móvil Helena Calva Oria iii. Gama Cromática El color da vida al diseño y se utiliza para poner énfasis y crear asociacio- nes. En este caso, el color se usa para llamar la atención. El sistema de color para esta apli- cación fue diseñado para establecer una gama flexible que respalde la marca, las comunicaciones y el pro- ductos. La paleta principal simplificada consta de blanco, verde y ofrece la opción al usuario de personalizar el color de la tarjeta de cada vivienda. Es importante que la combinación de colores cumpla con las relaciones de contraste mínimas que especifica WCAG 2.0. Esto ayudará a los usua- rios daltónicos o con baja visión a interactuar, y mejorará la usabilidad para todos los usuarios. Figura 28
  • 71. 71 Diseño IU para aplicación móvil Helena Calva Oria iv. Layout En el prototipo de baja fidelidad o wireframe se ha desarrollado el layout para optimizarlo al diseño de la forma más eficaz. De esta forma, se han distribuido todos los elementos necesarios, es decir, cajas de información, botones, iconos y contenidos de las diferentes pantallas. Se ha creado una malla básica, loca- lizando una barra superior de herra- mientas, una barra inferior de nave- gación y utilizando la sección central como área de contenidos Figura 29
  • 72. 72 Diseño IU para aplicación móvil Helena Calva Oria v. Botones Para continuar con el flujo principal y el desarrollo correcto de la acción, se guía a los usuarios utilizando botones que resaltan las acciones principales que pueden realizar. Los tamaños y tipos de botones se han priorizado para destacar a los usuarios cuáles son los movimientos naturales más importantes. El texto del botón comunica exac- tamente lo que sucederá cuando el usuario interactúe con él, a través de etiquetas procesables, como “Añadir vivienda” y “Configurar permisos”. Se evitan las explicaciones largas en el texto de los botones, utilizando texto breve y claro. Los botones se han desarrollado en tres tamaños (grande, normal y pequeño) y en dos tipos, primario y secundario, con versiones sutiles en tonos más claros para mostrar accio- nes que destaquen tanto, evitando llamar la atención. Los botones primarios son los mejo- res para la acción primaria única en la pantalla. Todas las acciones restantes pueden ser botones secundarios u otro componente como las selecciones (en calendario, por ejemplo).
  • 73. 73 Diseño IU para aplicación móvil Helena Calva Oria vi. Iconografía La iconografía usa símbolos para representar directamente un objeto o una acción. Usándose con moderación pro- porcionan claridad en la interfaz y reducen la carga cognitiva, orien- tando al usuario visualmente. Los iconos proporconarán principal- mente un acompañamiento visual a otros componentes de la interfaz de usuario, llamando la atención sobre acciones específicas. El estilo es plano y con poco detalle, con un grosor mínimo de 2 px en los trazos, manteniendo la gama cro- mática y los tonos neutros en con- traste con el fondo. Figura 30
  • 74. 74 Diseño IU para aplicación móvil Helena Calva Oria vii. Icon App Figura 31 Se ha decidido utilizar un icon app donde aparezca el logotipo, sin iso- logo asociado. DOOD proviene de la unión de las palabras “Door” y “Open”. De esta forma, sigue el estilo de otras marcas, como Booking, plata- forma que podría generar posibles usuarios del sistema al tratarse de un nicho de mercado asociado al alquiler de viviendas.
  • 75. 75 Diseño IU para aplicación móvil Helena Calva Oria PROTOTIPO f. PROTOTIPO Tras el desarrollo en baja fideli- dad del apartado anterior, se decide invertir tiempo en producir un pro- totipo lo más fiel posible a la rea- lidad para que, al ser testeado por potenciales usuarios, la navegación sea más atractiva e interesante, ya que no se obtiene el mismo resultado de las pruebas con usuarios utilizan- do wireframe que utilizando imáge- nes de alta calidad, donde se puede plasmar con más detalle el trabajo realizado en etapas anteriores. Para la realización de las pantallas se han utilizado Adobe Illustrator. Se muestran a continuación algunas capturas de pantalla del prototipo en alta fidelidad para que se pueda apreciar el trabajo realizado:
  • 76. 76 Diseño IU para aplicación móvil Helena Calva Oria
  • 77. 77 Diseño IU para aplicación móvil Helena Calva Oria Figura 32
  • 78. 78 Diseño IU para aplicación móvil Helena Calva Oria EVALUACIÓN EVALUACIÓN EVALUACIÓN 7
  • 79. 79 Diseño IU para aplicación móvil Helena Calva Oria En esta última fase del proyecto, se utilizarán varias técnicas para obte- ner información sobre los diseños del prototipo realizado, con el obje- tivo de mejorarlos, evaluarlos e intentar detectar errores. Se emplearán dos de los métodos más utilizados, la evaluación heu- rística y el test de usuarios. Tras los resultados obtenidos, se revisará el prototipo por si fuera necesario rea- lizar cambios y mejoras.
  • 80. 80 Diseño IU para aplicación móvil Helena Calva Oria EVAL. EURÍSTICA a. EVALUACIUÓN EURÍSTICA La evaluación heurística se trata de una técnica que consiste en utilizar un conjunto de reglas y principios de usabilidad para estudiar y analizar interfaces de usuario. Estas reglas y principios están creados por exper- tos en la materia, y existen para diferentes tipos de interfaces y sis- temas interactivos. Jakob Nielsen es quién desarrolló este método, aun- que hay muchos otros autores que han trabajado en la materia, como Mayhey o Schneiderman. Para la evaluación del prototipo se ha escogido el publicado por Molich y Nielsen en 1990 [12]. Este méto- do utiliza 10 reglas generales para identificar los posibles problemas de usabilidad del interfaz. 1.Visibilidad del estado del sistema: El sistema siempre debería man- tener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada den- tro de un tiempo razonable. En este prototipo se ha utilizado diferentes técnicas para mantener al usuario informado, por ejemplo, se recibe retroalimentación una vez el usua- rio utiliza alguno de los botones, en este caso de los iconos laterales que simbolizan la llamada desde el tele- fonillo, la videollamada o el timbre, pulsado se muestra en color y no pulsado se queda en gris. En el menú principal situado en la parte supe- rior de la pantalla, se indica en color verde oscuro distinto al apartado por el que esté navegando el usuario (la tarjeta de la vivienda) y siempre mantendrá dicho color corporativo. Otro ejemplo se localiza en el apar- tado “Calendario”, donde se marca del color dominante la elección del periodo temporal de acceso. Figura 33
  • 81. 81 Diseño IU para aplicación móvil Helena Calva Oria 2.Relación entre el sistema y el mundo real: En el sistema se utili- zará lenguaje que sea familiar para el usuario. Para ello se siguen las convenciones del mundo real, haciendo que la información apa- rezca en un orden natural y lógico. Se han utilizado de una librería para desarrolladores con la intención de que sean lo más familiares posibles. Por ejemplo, el icono del “Calenda- rio”, extendido en todo tipo de apps para indicar el apartado con el mismo nombre, o el del “Perfil de usuario”. Se utilizan también las fle- chas “Adelante” y “Atrás” para indi- car cuando un usuario quiere avanzar o retroceder en el mes que visualiza. Figura 34 3.Control y libertad de usuario: En ocasiones los usuarios pueden elegir funciones del sistema por error y será necesaria una “salida de emergencia”. Ésta deberá estar marcada de forma clara para ser fácilmente reconocible y evitar el estado no deseado al que accedió el usuario, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer. Para cumplir con esta regla, si se selecciona cualquier menú, se puede salir del mismo pulsando fuera de esa pantalla. Figura 35
  • 82. 82 Diseño IU para aplicación móvil Helena Calva Oria 4.Consistencia y estándares: Los usuarios no deberían cues- tionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas. En el caso de esta aplicación, se mantiene de forma coherente un estándar de color, los tamaños de los botones, de iconos y de textos, buscando la fácil comprensión de los accesos a los menús y las acciones que el usuario puede realizar en la apllica- ción. 5.Prevención de errores: Es mejor realizar un diseño cuida- doso que prevenga la ocurrencia de problemas que un buen diseño de mensajes de error. Por otra parte, en el apartado de “Añadir vivienda” se incluye la funcionalidad para la prevención de errores: una ventana modal en caso que el usuario pulse “guardar” sin haber introducido ningún dato. Figura 36
  • 83. 83 Diseño IU para aplicación móvil Helena Calva Oria 6.Reconocimiento antes que recuerdo: Se deben hacer visibles los objetos, acciones y opciones. El usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir ade- lante. Las instrucciones para el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario. En la pantalla donde es importante que el usuario confirme una acción pulsando el botón “guardar”, se mantiene siempre visible para que el usuario tenga presente dicha acción. Figura 37 7.Flexibilidad y eficiencia de uso: La presencia de aceleradores, que no son vistos por los usuarios nova- tos, puede ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapten el sistema para usos frecuentes, ya que utilizan diferentes caminos para acceder a un mismo destino. Los usuarios más experimentados a la hora de realizar la tarea de elimina- ción de un usuario o vivienda podrán realizarlo directamente desde la ficha de lista con el gesto “swipe” (deslizar hacia la izquierda), y no será necesario acceder a editar para ir al botón eliminar.
  • 84. 84 Diseño IU para aplicación móvil Helena Calva Oria 8.Estética y diseño minimalista: Los diálogos no deben contener información que sea irrelevante o poco usada. Cada unidad extra de información en un diálogo, compi- te con las unidades de información relevante y disminuye su visibilidad relativa. Se ha sintetizado al máximo el texto de los elementos interacti- vos, para evitar confusiones y dis- tracciones. Se han seguido las guías de desarrollo del sistema operativo, tomando como referencia las accio- nes predefinidas: “cancelar”, “acep- tar”, “ok”... Sí que se ha incluido un título y subtítulo en las ventanas modales de advertencia, a la hora de prevenir de un error al usuario. 9.Ayudar a los usuarios a recono- cer, diagnosticar y recuperarse de errores: Los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugiriendo una solu- ción constructiva al problema. Se incluyen mensajes de advertencia en las acciones que se creen que pueden ser no intencionadas, o que quizá puedan provocar un error al usuario. Se han utilizado ventanas modales en ciertas acciones para confirmar con el usuario la acción que quiere realizar, aportándole más informa- ción de la que inicialmente aparece en la pantalla. Por otra parte, se des- activan botones mientras el usuario no introduzca ciertos datos que se le piden, por ejemplo la clave wifi, con el objetivo de que complete toda la información necesaria y que no avance con datos incompletos que puedan dar un error posterior.
  • 85. 85 Diseño IU para aplicación móvil Helena Calva Oria 10. Ayuda y documentación: Incluso en los casos en que el sistema pueda ser usado sin documentación, podría ser necesario ofrecer ayuda y docu- mentación. Dicha información debe- rá ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa. Como se ha pensado desde un pri- mer momento que es necesaria una guía rápida de uso, se ha incluido un tutorial a través del cual se indican los principales apartados de la apli- cación. El usuario puede en cualquier momento acceder desde el menú “Tutorial de instalación” si necesita consultar alguna de las opciones. También existe un soporte en línea en forma de chat para dar apoyo al usuario en caso de necesidad.
  • 86. 86 Diseño IU para aplicación móvil Helena Calva Oria TEST USUARIOS b. TEST DE USUARIOS Desde el inicio se ha fijado como objetivo crear un prototipo interac- tivo de una aplicación android que permita gestionar el control de acce- sos y donde poder realizar pruebas reales con usuarios target. Tras el trabajo realizado, se ha podi- do generar una simulación real de lo que son las principales funcio- nalidades de la herramienta. Para este punto, se ha utilizado una de las técnicas dentro del proceso DCU pensada para evaluar con usuarios reales si el modelo del prototipo se ha realizado correctamente, reali- zando un test de usuarios presencial, donde evaluador y participante se encuentran en la misma ubicación, y donde tendremos la posibilidad de observar los comportamientos de varios usuarios en el uso del pro- totipo. El objetivo de este método de evaluación consiste en obtener información mediante el uso de la herramienta por usuarios potencia- les. Se busca comprobar cuáles son los posibles errores en caso de que existan, cuáles pueden ser las mejo- ras a implementar, evaluar el dise- ño, el contenido, la navegación y la utilidad de la misma… Para la realización de la prueba se ha utilizado el programa “Marvel APP”, que ofrece una simulación de un dispositivo móvil por lo que la expe- riencia del usuario es prácticamente la misma que si probase la aplicación en un dispositivo real. Se puede visitar la simulación en la siguiente dirección: https://marvelapp.com/proto- type/271i08hg También se ha grabado un vídeo explicativo de poco más de minuto y medio con las funciones principales de la aplicación. La intención inicial ha sido incluirlo como videotutorial dentro de la propia app, pero no se ha conseguido que el link funcione dentro del simulador. Se puede ver el vídeo aquí.
  • 87. 87 Diseño IU para aplicación móvil Helena Calva Oria i. Estructura del Test Para la realización del test de usua- rios se ha llevado a cabo inicial- mente un apartado de introducción, poniendo en situación al usuario y explicando el contenido de la prueba. Se le indica el objetivo de la misma, las instrucciones, y algunas pau- tas importantes como son que haga cualquier comentario en alto, ya que no se le está evaluando a él, sino a la aplicación, dejando claro que no hay respuestas correctas o incorrectas. En el punto uno se realizan las pre- guntas sociodemográficas con el objetivo de clasificar al usuario den- tro de un grupo concreto. Debe de informar de su género, edad, nivel de estudios finalizados, profesión y otras preguntas relacionadas con la tecnología y con su interés por la domótica. El punto dos es una prueba durante 10 minutos de utilización libre de la aplicación. Se indican algunas pau- tas para que no se sienta extraño con el manejo del prototipo, pero en ningún caso se guía sobre la APP, salvo por la visualización del video- tutorial una vez llega a la pantalla destinada a ello. Con esta prueba se pretende evaluar la facilidad de uso por primera vez sin ningún tipo de ayuda más de la que ofrecen las propias funcionalidades de la aplicación. En el punto tres se prueba a comple- tar cuatro tareas específicas focali- zadas en alguna de las funcionalida- des de la aplicación. Se ha valorado si los usuarios tienen éxito o no en la ejecución de dichas tareas, el tiem- po total dedicado en completarlas, y anotaciones que puedan resultar interesantes de analizar a posteriori. En el último punto se realizan pre- guntas cerradas y abiertas referentes a las cuatro áreas principales: conte- nido, navegación, diseño y utilidad.
  • 88. 88 Diseño IU para aplicación móvil Helena Calva Oria ii. Resultados del Test Se ha realizado el test con cinco per- sonas, dos hombres y tres mujeres. Los hombres tienen 56 (informá- tico) y 33 años (ingeniero), y las mujeres 64 (bibliotecaria), 27 (pro- fesora de infantil) y 16 (estudiante). Los diferentes perfiles enriquecen la información recabada para el estu- dio. Todos disponen de smartphone con sistema operativo android. Su relación con el uso de la tecnología es bastante diversa, aunque todos la manejan a nivel usuario.
  • 89. 89 Diseño IU para aplicación móvil Helena Calva Oria 1. Uso libre de la aplicación El hecho de que los cinco sujetos participantes estén habituados al uso de la tecnología ha influido en los resultados tan óptimos, ya que si no fueran usuarios habituales hubiesen tenido más problemas en navegar por los diferentes apartados y llegar a todas las funcionalidades que la APP ofrece. Si bien, no es fácil navegar por un prototipo con fun- cionalidades limitadas, El tiempo medio de navegación fue de 10:06 min. Todos pudieron acce- der a la herramienta y navegar por algunos de los apartados. tres de los cinco usuarios prefirieron ver el videotutorial, y dos de ellos no. En general están contentos con lo que han visto de la herramienta, pero tienen ciertas dudas a nivel de contenido (dónde encontrar qué). Sobre todo en la parte de gestionar los permisos.
  • 90. 90 Diseño IU para aplicación móvil Helena Calva Oria 2.Tareas específicas Se ha tenido en consideración varios factores para realizar la evaluación de este apartado, como el tiempo y la consecución de la tarea en una escala de tres valores: - Éxito: Si la tarea se ha completado correctamente en el tiempo máximo establecido. - Falso éxito: Si el usuario cree que ha completado la tarea, pero en rea- lidad no lo ha hecho. - Error: Si el usuario no ha podi- do completar la tarea en el tiempo máximo establecido. La toma de medidas durante el estu- dio ha sido estricta para conseguir la mayor calidad en la información, no dando por válidos algunos casos en los que, por el uso de un prototipo, la tarea fue más complicada. De las cuatro tareas que se han indi- cado, tan sólo una tiene un 100% de éxito entre los usuarios. Es decir, solo en una se ha completado la tarea satisfactoriamente en el tiem- po máximo establecido.
  • 91. 91 Diseño IU para aplicación móvil Helena Calva Oria 3. Cuestionario final Al finalizar la prueba se ha realiza- do un cuestionario con una serie de preguntas en relación a las cuatro áreas principales, con tres pregun- tas cerradas de respuesta “SÍ/NO” y una abierta, permitiendo a los usua- rios comentar sus impresiones. Los resultados obtenidos han sido: Contenido: A todos les parece útil utilizar el móvil para acceder al domicilio sin la necesidad de llaves, pero les preocupa qué puede ocurrir si se quedan sin batería, les roban el teléfono o se cae el wifi. Si bien no son problemas directos de la fun- cionalidad de la app, se buscará una alternativa a dichas cuestiones. Navegación: No se aprecia dificul- tad de navegación ni en su valora- ción está reflejado que les resulten complicadas las acciones a ejecutar, pero al ser la primera toma de con- tacto no hay fluidez para realizar algunas tareas. La ventaja principal es que todos los usuarios utilizan en su smartphone el sistema operativo Android, lo que propicia que se sien- tan cómodos con la interfaz. Diseño: El diseño les resulta atrac- tivo, consideran el color utilizado acertado y no han tenido problemas para visualizar textos, aunque a los de mayor edad les gustaría poder ajustarlo como lo hacen en la aplicación whatsapp. Utilidad: Todos aprecian un gran potencial en la aplicación y sus fun- cionalidades: La bibliotecaria para las visitas de sus familiares, el infor- mático porque tiene dos pisos que alquila en airbnb, el ingeniero por- que es adicto a la innovación tecno- lógica, la profesora para poder ges- tionar entregas de paquetes sin estar en el domicilio y la estudiante para no tener que llevar las llaves encima nunca más.
  • 92. 92 Diseño IU para aplicación móvil Helena Calva Oria 8 CONCLUSIONES CONCLUSIONES CONCLUSIONES
  • 93. 93 Diseño IU para aplicación móvil Helena Calva Oria El análisis previo realizado ha ayu- dado a recopilar información de aplicaciones similares existentes actualmente en el mercado. De dicho estudio se han extraído como refe- rencia las ideas más interesantes para los usuarios y se han tenido en cuenta las posibles carencias, erro- res o problemas que se han detecta- do y que hacen que la experiencia del usuario no sea la esperada: textos que no se visualizan, feedback de los elementos con el usuario, limitacio- nes de espacio… Tras este estudio, se puede afirmar que el IoT será un elemento más del día a día, y se convertirá en un componente estratégico para los negocios. Con los datos recopilados se revela que será fundamental en los procesos de toma de decisiones, otorgando más agilidad a las accio- nes. Conseguirá ahorrar costes y aumentar la seguridad, mejorando procedimientos y logrando empre- sas más innovadoras y productivas, así como permitiendo a los usuarios particulares optimizar procesos dia- rios repetitivos, ofreciendo de este modo mayor tiempo libre a los mis- mos y un considerable descenso de costes gracias al ahorro energético. El principal problema encontrado es la reticencia que puedan tener los usuarios al cambio, debido a la falta de información y a la escasez de tecnología referente a IoT. Sin embargo, y como se ha comentado, el potencial crecimiento exponencial de este sector propiciará la creación de más aplicaciones y dispositivos IoT, lo que afianzará la confianza de los consumidores. Por ello, y dado que la aplicación creada permite utilizarse tanto en el ámbito doméstico como profesional, se puede afirmar que su desarrollo contribuye a la mejora y el avance de la sociedad actual y futura. Una vez realizado el test con usua- rios y como punto final al proyecto, se procede a realizar el análisis final del trabajo realizado. El mayor desafío ha sido integrar todas las funcionalidades que se habían manifestado necesarias en las fases anteriores de la metodo- logía utilizada para que el producto final cumpliera las expectativas de los usuarios. Una de las deducciones a las que se ha llegado durante el estudio es la necesidad de mantener al usuario en el centro del proceso de diseño para su óptimo desarrollo y a asumir la diversidad de opiniones que pueden surgir de una sola idea. Sin tener en cuenta la opinión de varios usuarios, el resultado final estaría condicionado a la experien- cia de uno mismo, y no basado en los diferentes perfiles que utilizarán la herramienta. Por ello se conside- ra que es fundamental contar con
  • 94. 94 Diseño IU para aplicación móvil Helena Calva Oria el mayor número posible de perso- nas que puedan aportarnos opiniones y conocimiento dentro de su propia experiencia en el uso de aplicaciones. Los apartados más difíciles de llevar a cabo han sido los que hacían refe- rencia a la participación de personas en alguna de las fases del proyecto: entrevistas y cuestionarios, test de usuarios y recopilación de funcio- nalidades. A pesar de todo, se han completado todos los objetivos, tanto generales como específicos, y se ha conseguido obtener un producto final muy similar del que sería la aplicación real. Utilizar la filosofía DCU como base para el proyecto, ha ayudado a esta- blecer una planificación ordenada en tiempo y dedicación, ya que este pro- ceso fija una estructura definida. Ade- más, esta metodología permite flexi- bilidad en cada una de las fases para profundizar lo necesario, adaptándose a la temática. Las líneas de trabajo futuro se basarán en la iteración entre fases, trabajando soluciones a los problemas planteados por los usuarios en los test. En conclusión, los objetivos de este trabajo han sido siempre ambiciosos, con el fin de adecuarse a un producto final real y, tras revisar el trabajo fina- lizado, se ha cumplido con el cometido en su totalidad.
  • 95. 95 Diseño IU para aplicación móvil Helena Calva Oria 9 FIGURAS FIGURAS FIGURAS
  • 96. 96 Diseño IU para aplicación móvil Helena Calva Oria FIGURAS FIGURAS Figura 1: Análisis DAFO Figura 2. Tabla de recursos Figura 3. Diagrama de Gantt Figura 4. Timing Figura 5. Estructura del proceso de Design Thinking (Fuente https:// senorcreativo.com/) Figura 6. Estructura del proceso de DCU Figura 7. Flujo de trabajo en un desarrollo iterativo Figura 8. Tamaño de elementos tác- tiles (Fuente: Worköholics) Figura 9. Recomendación de tamaño de botones para diseñadores (Fuen- te: Apple) Figura 10. Porcentaje de errores de interacción táctil (Fuente: Micro- soft) Figura 11. Gestos básicos de interac- ción (Fuente: lukew.com) Figura 12. Zonas de interacción del pulgar (Fuente: gizmodo.com.au) Figura 13. Medidas de la pantalla y resolución de smartphones (Fuente: norfipc.com) Figura 14. Infografía de edad de encuestados Figura 15. Porcentaje de resultados de las respuestas de la encuesta Figura 16. Infografía de precio máxi- mo que el usuario está dispuesto a pagar Figura 17. Distintas pantallas de la interfaz de HomyHub Figura 18. Distintas pantallas de la interfaz de Ring Figura 19. Distintas pantallas de la interfaz de August Home Figura 20. Distintas pantallas de la interfaz de Equiva Lock Figura 21. Card Sorting Figura 22. Value Proposition Canvas Figura 23. Customer Journey Map Figura 24. Personas Figura 25. Escenario 1 María Isabel Figura 26. Escenario 2 María Isabel Figura 27. Árbol de contenidos Figura 28. Gama cromática Figura 29. Layout Figura 30. Ejemplo de iconos Figura 31. Icon App Figura 32. Prototipo de Alta Fidelidad Figura 33. Aviso configurar wifi de la app Figura 34. Permisos temporales de la app Figura 35. Perfil general de la app Figura 36. Pantalla añadir DOOD Figura 37. Permiso temporal semanal
  • 97. 97 Diseño IU para aplicación móvil Helena Calva Oria 10 BIBLIOGRAFÍA BIBLIOGRAFÍA BIBLIOGRAFÍA
  • 98. 98 Diseño IU para aplicación móvil Helena Calva Oria BIBLIOGRAFÍA BIBLIOGRAFÍA - SÁENZ HIGUERAS, NITA; VIDAL OLTRA, RUT: Redacción de textos científi- cotécnicos. Barcelona - CALLEJA GARCÍA, CARLA; SIERRA TAULÉ, NÚRIA. Cómo abordar el trabajo final del grado de Diseño y Creación Digital en seis sencillos pasos. Recurso de aprendizaje UOC. - BENEITO MONTAGUT, ROSER. Presentación de documentos y elaboración de presentaciones. Recurso de aprendizaje UOC. P08/89018/00446 - HASSAN-MONTERO, Y.; ORTEGA-SANTAMARÍA, S. (2009). Informe APEI sobre Usabilidad. Gijón: Asociación Profesional de Especialistas en Informa- ción, 2009, 73pp. ISBN: 978-84-692-3782-3. - MEMBRIVES, JUDITH. La importancia estratégica del diseño centrado en las personas. Mosaic [en línea], (noviembre 2019), no. 176. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n176.1951 - [1] VALDEOLMILLOS, CELIA: El mercado del hogar inteligente crecerá por encima del 25% en 2019, (abril 2019), Blog MCPRO: https://www.muycompu- terpro.com/2019/04/01/mercado-hogar-inteligente-2019 [en línea] - [2] ESIC BUSINESS & MARKETING SCHOOL. Hiperconectividad: datos, cifras, uso, y retos del IoT en Digital Business (enero 2018), art. https://www. esic.edu/rethink/marketing-y-comunicacion/hiperconectividad-datos-ci- fras-uso-retos-del-iot-digital-business [en línea] - [3] LET ‘S 4 MARKETING. El impacto del Internet de las Cosas (IoT) y sus aplicaciones, (septiembre 2019). Blog LetsMarketing. https://www.letsmar- keting.com/uncategorized/el-impacto-del-internet-de-las-cosas-iot-y- sus-aplicaciones/ [en línea] - [4] MEGNA, LENADRO: Orígenes de la metodología UX (parte 2). Blog D.La- teral. https://disenolateral.com/blog/origenes-de-la-metodologia-ux-2/ [en línea]
  • 99. 99 Diseño IU para aplicación móvil Helena Calva Oria - [5] VILLAMOR, CRAIG; WILLIS, DAN; WROBLEWSKI, LUKE (abril 2010). Touch gesture reference guide. https://www.lukew.com/ff/entry.asp?1071 [en línea] - [6] HOOBER, STEVEN. How Do Users Really Hold Mobile Devices? (febrero 2013). Blog uxmatters. https://www.uxmatters.com/mt/archives/2013/02/ how-do-users-really-hold-mobile-devices.php [en línea] - [7] LOMAS, NATASHA: Smartphone screens find their size sweet spot, (mayo 2017). Blog TechCrunch. https://techcrunch.com/2017/05/31/pha- bles-are-the-phuture/ [en línea] - [8] PÉREZ, ENRIQUE. ¿Qué es Material Design?, (noviembre 2014). Art. de opinión en ‘El Androide Libre’. https://elandroidelibre.elespanol. com/2014/11/que-es-material-design.html [en línea] - [9] FRÍAS, NAGORE. Una mirada a la evolución del diseño de interfaz, (junio 2015). Bilbao: Workoholics Blog. https://www.workoholics.es/evolu- cion-del-diseno-de-interfaz/ [en línea] - [10] GARCÍA, JORDI. Qué es el flat design o diseño plano, (septiembre 2013). Departamento de Internet Blog. https://www.departamentodeinternet.com/ que-es-flat-design-diseno-plano/ [en línea] - [11] Cita: Norman, D.A. (1988). The Psychology of Everyday Things. Basic Books. - [12] FINELLI, FERNANDO. 10 reglas heurísticas de usabilidad de Jakob Niel- sen, (junio 2011). Blog Braintive. http://www.braintive.com/10-reglas-heu- risticas-de-usabilidad-de-jakob-nielsen/ [en línea]
  • 100. 100 Diseño IU para aplicación móvil Helena Calva Oria