Proyecto Avanzado de Diseño Avanzado Proyecto

Pontificia Universidad Javeriana Cali Facultad de Humanidades y Ciencias Sociales

Proyecto Avanzado de Diseño de la Comunicación Visual

Leidy Bibiana Gómez Serna Diseño de Comunicación Visual

Tema Enrútate en Cali

Asesor de Proyecto de Grado Adriana Gastaldi

Santiago de Cali, Septiembre 22 de 2016

1 2 Proyecto Avanzado de Diseño Avanzado Proyecto TABLA DE CONTENIDO

1.Resumen Ejecutivo 2.Objetivos 2.1 Objetivo General 2.2 Objetivo Específico 3. Justificación 4. Contexto de la necesidad. 5. Audiencia Objetivo del proyecto 6. Benchmarking 6.1 Análisis del benchmarking 6.2 Análisis de resultados del Benchmarking 7. Estado del arte 8. Metodología 9. Resultados 10. Conclusiones 11. Bibliografía

3 4 Proyecto Avanzado de Diseño Avanzado Proyecto

RESUMEN EJECUTIVO

Este proyecto tiene como objetivo realizar una herra- mienta que permita conectar los lugares turísticos de la ciudad de Cali con sus usuarios, para hacer posible este proyecto se recopiló información de distintas fuentes, procesos de observación e investigación, entrevistas y encuestas con los usuarios y la secre- taria de cultura y turismo. Después de haber analizado he interpretado la información se propone como solución, el desarro- llo de una aplicación que permita dar a conocer los lugares de interés en el turismo de Cali y ademas que permita conocer la ubicación de la misma. Ademas la aplicación cuenta con diferentes formas de interacción con los usuarios lo que permite que el usuario obtenga beneficios por el uso de esta.

5 6 Proyecto Avanzado de Diseño Avanzado Proyecto

JUSTIFICACIÓN

Durante décadas, el turismo ha experimentado un En la ciudad de Cali se ha presentado un gran interés continuo crecimiento y una profunda diversificación, por el crecimiento del turismo que esto se ha visto hasta convertirse en uno de los sectores económicos reflejado en la creación de nuevos proyectos que que crecen con mayor rapidez en el mundo. El tu- incentivan y promueven la cultura caleña, uno de los rismo mundial guarda una estrecha relación con el principales aspectos diferenciadores y el principal desarrollo y se inscriben en él un número creciente factor que influye a la hora de exponer la ciudad es de nuevos destinos. Esta dinámica ha convertido la salsa debido a que ya es muy reconocida mun- al turismo en un motor clave del progreso socio dialmente y es además un gancho para atraer a los económico turistas. Hoy en día, el volumen de negocio del turismo Este trabajo pretende apoyar el crecimiento que se iguala o incluso supera al de las exportaciones de ha visto reflejado en el turismo dentro de la ciudad de petróleo, productos alimentarios o automóviles. El Cali, de esta manera proponer una herramienta que turismo se ha convertido en uno de los principales sea útil y de fácil adquisición para turistas como para actores del comercio internacional, y representa ciudadanos y así que ellos encuentren muchas mas al mismo tiempo una de las principales fuentes de ofertas turísticas de la ciudad como lo son museos ingresos de numerosos países en desarrollo. Este restaurantes, parques, centros comerciales, entre crecimiento va de la mano del aumento de la diver- muchos otros. sificación y de la competencia entre los destinos.

7 OBJETIVOS

Objetivo General

Generar una herramienta que permita conectar al sus usuarios con lugares de interes en el sector turistico de la ciudad de Cali.

Objetivo Específico

- Examinar la oferta que existen en los sectores de interes del turismo en la ciudad de Cali.

- Seleccionar los lugares de interés que se encuentran en el turismo de la ciudad de Cali.

- Diseñar una herramienta que permita conectar a sus usuarios con lugares de interes en la ciudad de Cali.

8 Proyecto Avanzado de Diseño Avanzado Proyecto

CONTEXTO DE LA NECESIDAD

En la ciudad de Cali se ha venido incrementando Antonio y Granada presentan atractivo turístico por el turismo debido a que esta ha tomado medidas su arquitectura, geografía y oferta culinaria para lograr desarrollar el potencial turístico, como Pasando el río Cali, en la zona occidental de la muestra un articulo en el periódico El País, en el ciudad está el Cerro de las Tres Cruces, con una 2014 el crecimiento de la llegada de extranjeros a caminada en ascenso de 400m. En la zona norte Cali fue de 9,7% frente a los 119.324 reportados en de la ciudad esta la Avenida Sexta. En la zona rural el año anterior. del sur la ciudad está el Corregimiento de Pance, el Las cifras no paran allí. Entre enero y marzo de 2015, cual ofrece estaderos a todo lo largo del río Pance. la llegada de viajeros internacionales al Valle del También en el Corregimiento de Pance está el Par- Cauca creció 12,9%, al pasar de 30.510 visitantes que Nacional Natural de los Farallones de Cali con en el mismo periodo de 2014 a 34.437 en el primer rutas para ecoturismo, caminantes y montañistas, trimestre de 2015. los destinos más populares son el acampadero El En este periodo, Cali recibió 31.672, lo que significa Topacio y Pico de Loro que con 2 800m de altura es 12,5% más que en igual lapso de 2014. un reto a sus visitantes. Dentro de la ciudad de Cali también se encuentran El Jardín Botánico de Cali está ubicado en el oeste diferentes atracciones turísticas para los usuarios de la ciudad, en la cuenca del río Cali en la comuna como por ejemplo “el centro de la ciudad conser- 1. Inaugurado en febrero del 2005, el Jardín botánico va muchas de las construcciones originales de la tiene 10 estaciones temáticas a lo largo de un reco- fundación, y es lugar de museos y teatros para el rrido de 800m que muestran diferentes ecosistemas enriquecimiento cultural. Pasando cerca del centro y ofrecen diversos servicios al visitante. La Feria de de la ciudad están el río Cali y la avenida Colombia, Cali es el evento que atrae más visitantes y turistas los cuales ofrecen una ruta muy agradable para a la ciudad. Desde 1957 se celebra entre el 25 y 30 de caminar, con paradas obligadas en el zoológico, el diciembre en eventos dispersos por toda la ciudad.” museo de arte moderno la Tertulia, la fuente y par- (Wikipedia (Cali, 2015) que El Peñón, el puente Ortíz, la iglesia la Ermita y la Torre de Cali, entre muchas otras. Los barrios San 9 AUDIENCIA OBJETIVO

Son personas de la ciudad de Cali y extranjeros inte- conocer (en esta opción te indica los lugares as co- resados en recrearse y conocer diferentes sectores del nocidos que existen). turismo en la ciudad de Cali Además de esto cuenta con una opción de menú para desplegar la barra de categorías y una opción para buscar un lugar especifico.

Travel Bogotá: aplicación para dispositivos móviles. Esta cuenta con un mapa que es la pagina principal de la aplicación y de en esta te lleva a una ventana BENCHMARKING emergente en donde puedes seleccionar una catego- ría de la cual estas interesad en estas se encuentran; Entidades de gobierno, turismo, transporte, comida y bebidas, comercio, otros, salud, educación. Al se- Caliup: aplicación para dispositivos móviles que se leccionar una de estas opciones te muestra una serie divide en 9 categorías entre ellas están; hospedaje, de pins dentro del mapa cercanos al lugar donde de compras, diversión, bares y pubs, cafés y postres, estas ubicado. salud y bienestar. En la parte superior cuenta con 3 botones uno es En esta se encuentra información descriptiva de para volver al menú de categorías, el siguiente botón lugar y un numero de teléfono. es para elegir una localidad dentro del mapa, y por Además cuenta con opciones de llamada, sitio web, ultimo el otro donde se encuentran una opciones compartir y dar me gusta. para agregar un lugar nuevo, favoritos, buscar, bus- En la parte inferior se encuentran uno botones que car dirección, entre otros. se dirigen hacia favoritos, un mapa de la ciudad, las actividades que pasan el día de hoy ( pero siempre NYC: Es una aplicación móvil que cuentan con un están las mismas) y una opción que te indica que perfil que se crea al iniciar sesión con Facebook dentro de este encuentran una opción para crear 10 Proyecto Avanzado de Diseño Avanzado Proyecto tu propio itinerario, amigos, lugares que visite, mis Cívico: Es una aplicación para dispositivos móviles, favoritos, preferencias ( es una opción para cambiar la cual existe en la ciudad de Bogotá y en la ciudad las categorías seleccionadas al inicio cuando recién de Santiago de chile, es un producto que brinda una se descarga), moneda, salir. información bastante amplia acerca de cada una de También encontramos un menú el cual esta dividido las ofertas que existen dentro de cada una de estas en categorías entre estas se encuentran; home, atrac- ciudades. Su menú principal se divide en categorías ciones, restaurantes, hoteles, itinerarios, experien- y además cuenta con unas categorías adicionales las cias y visitas, vida nocturna, a mi alrededor, mapa cuales clasifican un poco mas la información que es del metro, otros destinos, contáctenos, términos y brindada en esta aplicación. políticas, invitar amigos. Al dar clic en algún lugar se encuentran información del lugar, un horario de atención, la dirección, la pagina web, y además de esto hay una opción para dejar opiniones así conocer lo que piensan otros usuarios. Además te muestra una ubicación en el mapa del lugar.

Plan ciudad: sitio web creado por el periódico el país, es un producto que brinda información acerca de diferentes eventos que se realizaran en la ciudad este se divide en categorías las cuales son; conciertos, rumba, deporte, cultura, cine, otros, valle. Al ingresar a alguna de estas opciones te muestra el lugar donde se realizara la actividad, un horario, un teléfono para contacto. Este tiene una conexión con Facebook para invitar a tus amigos al evento. Puedes tener una sesión dentro de esta pagina web. Y además añadir un evento.

11 ANÁLISIS DEL BENCHMARKING

Para realizar el análisis de comparación de los casos antes mencionados fue necesario utilizar una matriz comparativa de doble entrada en la cual se escogie- ron unos criterios de diseño para evaluar en cada uno de los casos dando luego una calificación numérica, siendo 1 el menos favorable y 5 el más favorable. A continuación se muestran los criterios escogidos para la evaluación:

Criterios Evaluados 1.Contenido, Información y claridad 2.Identidad Visual de la Marca 3.Grado de Interacción con los usuarios (interacción activa) 4.Información Dinámica centrada en los contenidos 5.Cantidad de Información disponible

12 Proyecto Avanzado de Diseño Avanzado Proyecto

CASOS CRITERIOS TOTAL%

12 34 5

1. Caliup 2 2 43 3 14/25 56%

2. Travel Bogotá 2 3 33 3 14/25 56%

2. NYC Nativoo 5 4 4 4 5 22/25 88%

4. Plan Ciudad 5 5 45 4 23/25 92%

5. Cívico 5 5 5 55 25/25 100%

TOTAL 19/251 9/25 20/25 19/25 21/25

% 76%7 6% 80%7 6% 84%

13 ANÁLISIS DE RESULTADOS

Estas son las conclusiones sacadas a partir del grá- fico anterior.

Contenido: el 76% de las aplicaciones tienen sufi- ciente y buena información. El contenido es claro para sus usuarios, tienen fotografías, vídeos, textos, enlaces, boletines digitales, redes sociales y comu- nicación en tiempo real con los usuarios.

Identidad Visual de la Marca aplicada a página web: El 76% aplicaciones evaluadas, cuentan con una imagen atractiva para los usuarios, el resto presentan deficiencia en el diseño de la aplicación de la imagen.

Grado de Interacción con los usuarios (interacción activa): el 80% de las aplicaciones posee una plata- forma interactiva que les permite comunicarse con el usuario de manera efectiva.

Cantidad de Información disponible: el 76% de apli- caciones, tienen suficiente y valiosa información de todo tipo, visual, textual, fotográfica. Se destacan NYC Nativoo de la ciudad de Nueva york, Plan Ciudad pagina web de el periódico el País y Cívico de la ciudad de Bogotá y de Santiago de Chile. 14 Proyecto Avanzado de Diseño Avanzado Proyecto

ESTADO DEL ARTE

Para este proyecto se tomó como base a distintos au- ción, cubriendo las necesidades de los individuos de tores los cuales sirvieron como ayuda para analizar una sociedad mediante su adquisición” (Marín, 2010) los actuales requerimientos de diseño y estrategias Una de las necesidades fundamentales del ser hu- de comunicación efectivas usadas por otros que mano es la comunicación, esto ha permitido que sea sustentan las decisiones y propuestas de diseño para un gran impulsador para el desarrollo tecnológico visibilizar el turismo caleño. como lo mencionan Carlos Enrique Lemus Serrano Actualmente los medios de comunicación y los y Jhony Mikel Escobar, “esto ha permitido que la nuevos avances tecnológicos se están convirtiendo comunicación evolucione en la era digital en donde en en una herramienta muy importante para trans- se busca con gran ímpetu la versatilidad, eficiencia y mitir aquello que se quiere mostrar al usuario. Los rapidez en el manejo de la información que va desde contenidos se muestra a través de diferentes canales disminuyendo cada día más la brecha digital que le los cuales facilitan la llegada de esta información a permite a los seres humanos alcanzar estilos de vida las personas. Los medios virtuales como el internet orientados a la permanente conectividad, a través las aplicaciones móviles, las redes sociales entre de servicios electrónicos o redes sociales. No es de otros han proporcionado nuevas formas y métodos extrañar que hasta el 2011 estudios del Pew Internet de acceder a esta información. & American LifeProject reflejaran que el 90% de la Según Juan Ángel Jódar Marín las técnicas implan- población estadounidense cuenta con un teléfono tadas en la nueva era digital abre un amplio campo celular (Amy Gahran-CNN, 2011) y en América Latina de posibilidades a la comunicación humana, el dice cerca de 400 millones de personas como mínimo que la información es el eje sobre el que gira esta cuentan con un teléfono móvil (Mobile Life, 2012). revolución tecnológica, el autor Juan Ángel Jódar Todo esto indica que en la actualidad los teléfonos Marín dice que “La tecnología debe ser considerada móviles se han convertido en una herramienta de como un nivel intermedio entre la Ciencia y la Socie- uso cotidiano que para muchos incluso ya es indis- dad, de modo que los grandes avances tecnológicos pensable.” (Serrano & Escobar, 2012) desarrollados por la Ciencia puedan convertirse en En la ciudad de Cali se han realizado proyectos aparatos o servicios susceptibles de comercializa- que tienen el fin de promover el turismo; de realizar 15 dichos proyectos se han encargado las entidades Además de estas paginas web también se encuentran correspondientes, lo cual genera la realización de blogs de las 10 mejores cosas que hacer en Cali y una serie de eventos y actividades que promueven el estos brindan información de los lugares y eventos desarrollo cultural y la conservación del patrimonio mas reconocidos y nombrados a nivel mundial. ciudadano. Paginas web en las que se pueden encontrar infor- Entre algunos proyectos que se han realizado para mación acerca de lugares y eventos que se llevan a el desarrollo turístico se encuentran los siguientes. cabo en la ciudad de Cali:

Plan Ciudad: Esta es una pagina web en la cual se Gestión y promoción de la secretaria y turismos y encuentra información como lo son horas y fechas de comercio en los siguientes las actividades de la ciudad de Cali y esta dividida por Proyectos y actividades a nivel regional. varias categorías entre estas están: Deporte, Cultura, Rumba, Cine, Conciertos, Valle y Otros, dentro de cada una de estas categorías se encuentran eventos 1.Turismo y ruta religiosa y actividades a realizarse a nivel local o regional. Es 2.Ruta Gastronómica una plataforma que es creada por el periódico El País. 3.Ruta Destino paraíso 4.Mapa de turismo del valle del cauca Minube: Es una plataforma digital que brinda in- 5.Apoyo a los malecones formación acerca de cada lugar una breve historia 6.Promoción de eventos turísticos y comerciales de que es y como se tiene un contacto con el lugar, 7.Apoyo a convenios público privado para afianzar esta también se encuentran diferentes categorías los distintos programas dentro de las cuales son, Turismo, Hoteles, Que ver, 8.Asistencia al diseño de proyectos turísticos y co- Restaurantes, Fotos, Vuelos, Mapa, Guías de viaje, merciales de vallecaucanos entre otros.

16 Proyecto Avanzado de Diseño Avanzado Proyecto METODOLOGÍAS TÉCNICAS Y HERRAMIENTAS

Para la realización de este proyecto se utiliza una Entrega: Terminada la depuración de la aplicación y metodología que cuenta con 5 etapas las cuales se atendidos todos los requerimientos de última hora dividen en: del cliente se da por finalizada la aplicación y se procede a la entrega Análisis: En esta fase se analizan las peticiones o re- querimientos de las personas o entidad para la cual se desarrolla el servicio, el propósito es definir las TÉCNICAS características del mundo o entorno de la aplicación. • Entrevistas Diseño: El objetivo de esta etapa es plasmar el • Trabajo de Campo pensamiento de la solución mediante diagramas • Encuestas o esquemas, considerando la mejor alternativa al • Recolección de Información integrar aspectos técnicos, funcionales, sociales y • Análisis de información económicos. A esta fase se retorna si no se obtiene lo deseado en la etapa prueba de funcionamiento.

Desarrollo: El objetivo de esta fase es implementar el diseño en un producto de software. En esta etapa se utilizara un programa que emula la creación de la aplicación para que así se puedan realizar las pruebas de funcionamiento.

Prueba de Funcionamiento: El objetivo de esta fase es verificar el funcionamiento de la aplicación en diferentes escenarios y condiciones;

17 RESULTADOS

ETAPA DE ANÁLISIS del año; lo anterior indica que las temporadas de INFORME ESTADÍSTICO ACERCA mayores visitantes son a principio de año, mediados DEL TURISMO EN EL AÑO 2015 y los últimos meses. La cantidad de visitantes en el mes de diciembre experimento un crecimiento del A continuación se muestra información relevante 26% frente al mismo periodo del año anterior. acerca de las características de visitantes de los Al observar las edades de los visitantes se encontró puntos de información turística que están a cargo que la mayoría (66%) están en el rango de edades de la Oficina de Turismo Municipal en el 2015. de 21 a 45 años, seguido de personas mayores de La información se obtuvo mediante un instrumento 45 años con un porcentaje de 26%. de medición (encuestas). Aplicada a los visitantes La mayoría (68%) de visitantes que recibió el punto de los puntos: Esta constaba de datos básicos como de información turística en el 2015 procedían del nombre, correo electrónico, nacionalidad, edad; extranjero, el (19%) de otras ciudades de Colombia Además indagaba sobre el principal motivo de viaje, y el (13%) eran locales. el medio de transporte empleado para llegar a la Porcentajes de zonas procedentes de Colombia ciudad, tipo de establecimiento en que se aloja, entre 83% el centro del País : Antioquia, Santander, Caldas, otras características. Es necesario mencionar que los Boyacá, Cundinamarca, Risaralda, Quindío, Tolima, cálculos no incluyen los visitantes del mes de Enero, Huila. dado que en este mes se empleo otro instrumento. 8% occidente del País: Chocó, Valle del Cauca, Cauca El numero de visitantes de los puntos de infor- 5% norte del País: Córdoba, Sucre, Magdalena, bolí- mación turística en el 2015 ascendió a 1.286. De var, Atlántico, Cesar, Guajira. manera general se observa que la mayor cantidad de 2% sur del País: Nariño, Putumayo, Caquetá, Ama- visitantes se dio en el mes de enero a partir de ahí, zonas. los visitantes van disminuyendo al pasar el tiempo y 1% oriente del País: Arauca, Casanare, Vichada, Meta, aumentan nuevamente en el mes de julio. En el mes Guaviare, Gianía, Vaupés. de agosto se evidencia un decrecimiento de visitan- Porcentaje de zonas de procedencia de extranjeros. tes nuevamente, y un ascenso en los últimos 3 meses 43.8% América latina 18 Proyecto Avanzado de Diseño Avanzado Proyecto Proyecto Avanzado de Diseño Avanzado Proyecto

43.1% Europa Perfil de los visitantes 6.9% Norteamérica 52% masculino 3.4%Asia 48% femenino 2.7%Oceania 0.1% África Conclusiones En el 2015 la mayoría de visitantes extranjeros del o El 43.1% de los visitantes extranjeros provienen punto de información turística provenían de países del continente europeo y el 43.8% de Latinoamérica. latinoamericanos y europeo, indicio de nuestros o El 83% de los visitantes nacionales provienen del mayores mercados potenciales. centro del país. o El motivo principal de viaje de los visitantes es Motivos de viajes de los visitantes conocer la cultura. El principal motivo de los visitantes que llegan a San- o La edad promedio de los visitantes es de 37 años. tiago de Cali según los resultados de la encuesta; es el cultural, que involucra productos turísticos como la gastronomía, los museos, el turismo religioso, visita a sitios emblemáticos de la ciudad y el pro- ducto estrella en la ciudad de Cali la salsa , seguido del turismo recreacional vacacional y el turismo de naturaleza. 60.7% cultural 14.8”%recreacional o vacacional 14.2% turismo rural 2.5% educación y/o formación 2.9%reuniones o negocios 2.5% visitas parientes o amigos 0.2% salud 0.1% compras 1% otros 1.1% No responde 19 TURISMO GASTRONÓMICO DE LA CIUDAD DE CALI posible obtener la información oportunamente; la capacidad de las zonas gastronómicas para la aten- La gastronomía adquiere cada vez más importancia ción de usuarios es de 10.090 mesas y 39.317 sillas. en la ciudad de Cali por la gran variedad de comida La ciudad de Cali cuenta con 5 zonas gastronó- que se puede encontrar. Esto nos obliga a un estu- micas reconocidas. Además tiene otros lugares que dio obligatorio que muestre a propios y visitantes oficialmente no están reconocidos pero que cuenta lo que se ofrece, que pasa por, ubicación de zonas con una gran oferta gastronómica. gastronómicas, tipo de comida rango de precios y Zonas gastronómicas servicios adicionales, entre otros. Así mismo es una Granada, Ciudad Jardín, Parque del Perro, San An- información importante para que la oficina de Turis- tonio, Peñón mo de la Secretaria de Cultura y Turismo oriente su Otros lugares evaluados intervención en el sector para el mejoramiento de la La 66, Parque del chontaduro, Alameda, La 44 Norte, calidad y apoyo en la promoción de la gran oportu- Zoológico, San Cayetano, Ruta Salsa, Novena, Flora nidad turística que ofrece la cocina para la ciudad. Centros comerciales evaluados Para llevar a cabo las caracterizaciones de cada Palmetto, Unicentro, Chipichape, Único, Jardín Pla- zona y de los centros comerciales se aplico un ins- za, Holguines, Cosmocentro, Centenario. trumento de medición a los propietarios, adminis- tradores o trabajadores de los establecimientos en NAVEGACIÓN INTUITIVA la cual se evaluaron aspectos tales como; informa- ción básica, requisitos de funcionamiento básico, Uno de los aspectos esenciales para tener en cuen- clasificación del servicio, tipo de establecimientos, ta a la hora de realizar una aplicación es la manera infraestructura, especialidad de comida y caracte- de navegar entre los contenidos, de manera que rísticas del personal entre otras. resulte mas fácil de comprender para el usuario, La cantidad de establecimientos que fueron evitando la desorientación que se puede percibir inventariados y caracterizados fue de 904, es nece- por una navegación confusa. sario tener en cuenta que 16 establecimientos del “La navegación intuitiva está también relacionada parque del perro, 14 del Centro Comercial Único y con la consistencia(La consistencia, entonces, se 8 del Peñón se encuentran en la base de datos más trata de respetar estos cono- cimientos y costum- no fueron incluidos en el análisis dado que no fue bres del usuario, no solo en el interior de la apli- 20 Proyecto Avanzado de Diseño Avanzado Proyecto

cación, sino también en relación con el resto del la economía visual y tener un buen criterio para SO.). Cada sistema operativo propone diferentes determinar qué incluir y qué no en el diseño. Una elementos para navegar por la app como botones, gran cantidad de elementos puede abrumar al pestañas y paneles. Hacer uso de ellos hará que usuario, por eso, lo que está en pantalla tiene que el usuario los reconozca a primera vista y, solo ser necesario en ese momento y en esa situación con estos componentes, ya sepa cómo ir de una de uso. sección a otra.” Hacer el diseño simple es —vaya paradoja— bas- También se debe tener en cuenta que para el tante complicado, pero reporta grandes beneficios usuario es importante saber que pasara después en la experiencia de uso de la aplicación. de pulsar un botón o de que manera se mostraran las pantallas. Es importante que exista un botón USABILIDAD de “volver” ya que esto genera una sensación de alivio al usuario y le ahorran los esfuerzos inútiles “La Usabilidad es la medida de la calidad de la por intentar comprender como ir de un sitio a otro. experiencia que tiene un usuario cuando inte- “Una navegación intuitiva permite, justamente, lo- ractúa con un producto o sistema.” Esto se mide grar un uso fluido y sin esfuerzo de la aplicación. “ realizando estudios de las relación que se produce entre las herramientas y quienes la utilizan, para SIMPLICIDAD determinar la eficiencia en el uso de los diferentes elementos ofrecidos en la pantalla. “La simplicidad visual está directamente rela- cionada con la usabilidad. Ser simple implica en CARACTERÍSTICAS DE LA USABILIDAD cierta medida ser mínimo, contar con pocos ele- mentos, pero sobre todo, que aquellos presentes Facilidad de aprendizaje: define en cuánto tiempo en la interfaz tengan una función bien definida que un usuario, que nunca ha visto una interfaz, puede contribuya a cumplir el objetivo de la app y ayude aprender a usarla bien y realizar operaciones al usuario. básicas. Los móviles no son dispositivos para mostrar mucha información en pantalla. Por esta misma Facilidad y Eficiencia de uso: determina la rapidez razón, la simplicidad consiste también en manejar con que se pueden desarrollar las tareas, una vez 21 que se ha aprendido a usar el sistema. sino que pueden compararse con escenarios parti- Facilidad de recordar cómo funciona: se refiere culares que existen tiempo atrás: a la capacidad de recordar las características y Mala resolución, tipografía pequeña, montones de forma de uso de un sistema para volver a utilizarlo información, lectores apurados y ambientes cambian- a futuro. tes... Estas no son condiciones nuevas y los diseña- dores de información han estado lidiando con ellas Frecuencia y gravedad de errores: plantea la ayu- desde siempre. En lo que concierne a la tipografía, la da que se le entrega a los usuarios para apoyarlos pantalla es solamente papel de mala calidad. cuando deban enfrentar los errores que cometen al usar el sistema. Según el libro diseñando app para móviles de Jose Vittone Y Javier Cuello Satisfacción subjetiva: indica lo satisfechos que quedan los usuarios cuando han empleado el La identidad visual sistema, gracias a la facilidad y simplicidad de uso Una aplicación es, entre otras cosas, una pieza de de sus pantallas. comunicación. Forma parte de un sistema y es una oportunidad para extender la identidad de una TIPOGRAFÍA empresa o producto. A través de las diferentes pantallas de la app, los En el libro “Aprende a diseñar apps nativas” se re- colores, tipografías y fondos actúan como elemen- fieren a Erick Spiekermann como la eminencia en tos que reflejan esa identidad. tipografía. Ya que en su larga carrera ha diseñado Claramente, uno de los componentes de la identi- gran cantidad de tipografías. dad es la marca. Aunque sea tentador hacer un uso Una de las tipografías mas mencionadas en este extensivo y repetido de ella, se recomienda incluir- libro es Meta, ya que esta es una de las tipografías la en lugares propicios para tal fin, como pantallas mas usadas en infinidad de diseños alrededor del introductoras, pantallas para ingresar clave y mundo, uno de las marcas reconocida en utilizarla usuario, o en la sección «Acerca de». De esta forma, fue Firefox. se puede asegurar una correcta exhibición de la Spiekermann explica que los entornos digitales no identidad sin afectar la navegación y la experiencia suponen una condición nueva para la tipografía, de uso. 22 Proyecto Avanzado de Diseño Avanzado Proyecto

Íconos y pantalla inicial app. Distintivo, porque tiene que separarla de las demás, incluso de aquellas que cumplan funciones Dicen que la primera impresión es la que cuenta. similares, y representativo, porque sus caracterís- En el mundo de las aplicaciones esa primera im- ticas visuales tienen que comunicar claramente el presión está limitada a dos componentes visuales: objetivo principal de la aplicación. Las formas sim- el ícono de lanzamiento y la pantalla inicial —tam- ples, no muy cargadas y cuidadas en sus detalles, bién llamada splash— que se mostrará muchas suelen ser las que tienen mayor efectividad. veces al abrir la aplicación. El tamaño también es algo a tener en cuenta. Algu- Estos elementos se verán antes que nada, incluso, nas veces, el ícono se verá realmente grande, por antes de empezar a usar realmente la aplicación. ejemplo en las tiendas de aplicaciones, pero otras, No menospreciar su importancia y darles la aten- como cuando la app está instalada, se verá mucho ción que merecen, garantiza arrancar con el pie más pequeño. Al diseñarlo hay que considerar derecho. todas las posibilidades, añadiendo más o menos detalle a la imagen en función de sus dimensiones. Ícono de lanzamiento Siendo aún más específicos, cada uno de los SO tiene diferentes requisitos que debe cumplir el Hay que pensar en la aplicación como un producto ícono de lanzamiento. Tanto Android1 como iOS2 que estará en un escaparate junto a muchos otros ofrecen detalladas guías del estilo visual y caracte- y el ícono de lanzamiento es el packaging que lo rísticas técnicas que debe tener esta imagen. envuelve. En primer lugar, este ícono servirá para representar En Android los íconos son objetos representados a la app en las diferentes tiendas de aplicaciones frontal- mente con una ligera perspectiva, como si —junto a las pantallas y textos promocionales— fueran vistos desde arriba. Dan sensación de vo- como elemento de venta para convencer al usuario lumen y profundidad, jugando con transparencias de descargarla. para integrarse mejor a la pantalla. Las formas son Sorteado este paso, y una vez instalada en el telé- distintivas y con medido realismo. fono, la aplicación convivirá con muchas otras que el usuario haya instalado; por eso, el ícono de lan- La situación es diferente en iOS: los íconos son zamiento debe ser distintivo y representativo de la por lo general representaciones muy simplificadas 23 de objetos reales, o abstracciones del concepto mación, por ejemplo, en un cuadro de diálogo con de la app. Por lo general el ícono contiene un una alerta. En el segundo caso, los íconos inte- solo elemento principal, sin muchos detalles, que riores actúan como complemento de elementos reposa sobre un fondo opaco. Para completar la interactivos, como cuando se encuentran dentro apariencia visual que el ícono tiene en la pantalla de botones o pestañas. Finalmente, su función del teléfono, iOS añade bordes redondeados a la puede ser la de mejorar la utilización del espacio, imagen, que debe ser cuadrada y cubrir la totali- en este caso, el ícono resume visual- mente algo dad del tamaño requerido en cada caso. que en forma de texto sería muy extenso o comple- jo de entender. Por su parte, en Windows Phone tienen un estilo bastante característico: los íconos son pictogra- Los íconos tienen que transmitir por sí solos la ac- mas. Formas extraordinariamente simples y de ción que ejecutan y esto depende del contexto. Por colores planos —sobre todo blanco—, casi sin ejemplo, un ícono de «eliminar» puede referirse a detalles e integradas perfectamente a su contene- un solo elemento en particular o a varios, depen- dor. En este caso, la transparencia es fundamental diendo de dónde esté ubicado y a qué elemento de ya que las imágenes están ubicadas dentro de una la interfaz esté visualmente asociado. forma cuadrada, que puede cambiar el color de Cuando los íconos acompañan determinadas fondo de acuerdo a las preferencias cromáticas del acciones — si no tienen etiquetas de texto que usuario. ayuden a ejemplificar su función— se vuelve más importante que sean claros y representativos. Esto Íconos interiores ocurre cuando, por limitaciones de espacio, no puede incluirse un ícono y texto al mismo tiempo. Ya dentro de la aplicación, los íconos interiores Además, es una tendencia que está empezando a tienen un papel menos estelar y más funcional que verse cada vez más en las aplicaciones. los de lanzamiento. Puede ser que pasen desaper- La interpretación de íconos supone cierta subje- cibidos, pero su trabajo es importante y silencioso tividad que hay que tratar de eliminar haciendo y, como tal, digno de tener en cuenta. un uso correcto de ellos. Por ejemplo, en cada Su uso suele estar asociado a tres escenarios. El plataforma algunas acciones como «buscar», primero, como ayuda visual para reforzar infor- «guardar» o «editar» tienen íconos asociados. El 24 Proyecto Avanzado de Diseño Avanzado Proyecto

usuario ya los conoce y sabe qué significan, por lo estado, haciendo que, aparentemente, la carga tanto, darles el uso que se espera de ellos ayudará resulte más fluida. a alcanzar consistencia y mejorará la usabilidad de En el caso de Windows Phone, el sistema operativo la aplicación. se encarga de gestionar la pantalla de inicio que consiste en una ampliación del ícono de lanza- Pantalla inicial miento. En cuanto a la orientación de esta pantalla en Conocida también como splash, es la primera pan- teléfonos móviles, hay que recordar que suele talla que verá el usuario al iniciar la app. Su uso mostrarse de forma vertical, mientras que en las está siendo cada vez más limitado —y evitado—, tabletas, es necesario determinar la orientación por lo que generalmente se muestra rápidamen- que se está usando al momento de mostrar el te la primera vez que se abre la aplicación. Esta splash y, en función de eso, hacer uso de la versión pantalla sirve como presentación del contenido correspondiente al modo horizontal o vertical. mientras se realiza la carga inicial, por tanto, es normal que se incluya un elemento indicativo de Grilla o retícula de construcción carga junto a los demás elementos gráficos. La pantalla inicial tiene un carácter tan efímero La grilla o retícula —grid en inglés— es la estruc- que pocas veces se ve más de un par de segundos. tura invisible sobre la cual se apoyan todos los Debido al poco tiempo de vida que tiene, la infor- elementos visuales. Su función es la de separar mación que muestra se debería limitar al nombre y cada uno de los componentes de la interfaz en versión de la aplicación, y poco más, ya que desa- un espacio ordenado, organizando los sitios que parecerá tan pronto como la aplicación termine de quedarán en blanco y aquellos que contendrán cargarse. formas. Una retícula bien definida se transforma En algunos casos, este splash se trata de una en una ayuda al diseño que, generando orden y representación del contenedor de la aplicación: simplicidad, mejora la usabilidad de la app. una imagen casi idéntica a la que verá el usuario En su forma más básica consta de un módulo base: cuando la carga haya finalizado, pero sin aquellos un cuadrado de un tamaño determinado que se datos que pueden llegar a cambiar como textos, usa como medida de referencia. A su vez, este mó- etiquetas en botones y elementos de la barra de dulo puede dividirse en submúltiplos para espacia- 25 dos más pequeños. La tipografía es un componente que, como boto- Mientras el diseño de la interfaz está en desarrollo, nes y gráficos, también se asienta en una retícula la retícula se representa por medio de líneas guía. que definirá su ubicación y posición dentro del Una vez terminada la estructura, se puede percibir contexto general de la pantalla. por el llamado «ritmo visual» que ubica los ele- mentos armónicamente en el espacio. Serif o sans-serif En el diseño de interfaces para móviles, la grilla permite establecer márgenes y determinar la ubi- Generalmente el debate sobre la elección de la cación de los botones, la fuente suele concentrarse mayormente entre las separación de la tipografía y el espacio interior y tipografías que tienen serifa y las que no. Si bien exterior de los contenedores. Por supuesto, cada es cierto que en tamaños pequeños y bajas resolu- uno de los sistemas operativos tiene diferentes ciones rinden mejor aquellas fuentes más limpias, retículas y por lo tanto, distintos módulos. abiertas y sans-serif, también pueden considerarse las serif para los títulos principales, cuando cuen- Tipografía ten con un tamaño en el que las serifas no sean un impedimento para la lectura. Como en cualquier diseño, el objetivo de la ti- Aunque en móviles no sea habitual una lectura de pografía es con- seguir que el texto se lea con texto prolongada, la correcta legibilidad es una claridad. Esto se logra no solo con una adecuada parte fundamental del diseño; por esta razón, la elección de la fuente, sino también gestionando su tipografía es tan importante como cualquier otro tamaño, separación entre líneas, ancho de colum- elemento visual que se incorpore en una interfaz y nas y con- traste visual con el fondo. su elección no debería descuidarse. Este último punto, el contraste, es más importante de lo que puede creerse a simple vista. Un móvil es Legibilidad y resolución un dispositivo que muchas veces se usará fuera de casa, por ejemplo, en la calle. En algunos momen- Por ser un soporte digital, los móviles tienen ca- tos el sol dará directamente sobre la pantalla y si racterísticas propias y algunas limitaciones ajenas no hay un buen contraste entre tipografía y fondo, a los medios impresos tradicionales. La pantalla la información en pantalla será imposible de leer. influye bastante en el comporta- miento y des- 26 Proyecto Avanzado de Diseño Avanzado Proyecto

empeño tipográfico si se tiene en cuenta que, en para aprovechar el área disponible sin perjudicar algunos casos, es sumamente pequeña. la lectura. Actualmente, muchos dispositivos tienen pantallas Los tamaños mínimos pueden variar dependiendo con buena resolución, lo que elimina un factor de del sistema operativo, la resolución de la pantalla complejidad y una gran preocupación a la hora de y la fuente que se elija. En todo caso, cuando se elegir qué fuente se usará. Este tipo de pantallas trata de tamaños pequeños, se aconseja elegir suele encontrarse en móviles de alta gama, sin fuentes de formas simples y abiertas, con espacia- embargo, hay otros teléfonos con características do entre caracteres, líneas y márgenes para dar no tan interesantes. aire visual que facilite la lectura. En este último caso, elegir la tipografía es una La mejor forma de asegurar una correcta legibili- tarea bastante difícil que no se limita a la elección dad no es otra que ponerla a prueba en el teléfono de familia y tamaño, ya que, mientras más peque- para el cual se diseña. Los diseños en pantalla de ña sea la pantalla, hay más posibilidades de que la ordenador suelen ser engañosos y comprobarlos forma en que se pintan en ella los caracteres, sea en el entorno más real posible, permite realizar más pobre. ajustes y correcciones hasta conseguir el tamaño adecuado. Tamaños mínimos En Android, el tamaño tipográfico se mide en sp —scaled pixels o píxeles escalados—, una forma En soportes digitales, como un móvil o una tableta, de modificar la escala de las fuentes de acuerdo al algo que condiciona el tamaño tipográfico es la tamaño de pantalla y a las preferencias definidas distancia a la cual se por el usuario en su configuración del teléfono. Los tamaños más comunes van desde 12sp hasta 22sp. sujeta el dispositivo. Los móviles suelen sostenerse El tamaño es variable en iOS, dependiendo de de forma que la pantalla está más cerca del ojo del dónde está ubicado el texto. Teniendo en cuen- lector que en el caso de una tableta, lo que permi- ta tamaños para la densidad «retina», los títulos te que el tamaño de la tipografía sea más pequeño. principales rondan los 34px. Por otro lado, el Al mismo tiempo, en los teléfonos el espacio en tamaño en etiquetas dentro de botones importan- pantalla es mucho menor, lo cual obliga a ajustar tes es aproximadamente 28px. A partir de allí, va el interlineado y la sepa- ración entre caracteres, disminuyendo en los diferentes elementos hasta 27 llegar al tamaño más pequeño, cercano a los 14px. del contenido y la fecha de envío; todos estos Sin embargo, se recomienda no usar dimensiones elementos tienen diferente importancia y definirla inferiores a 20px en los textos de lectura. es el primer paso para saber qué estilo tipográfico En Windows Phone, más que otras plataformas, el aplicar. diseño recae en la tipografía. Una mala elección del tamaño de la fuente en una app que cuenta Las tipografías de cada sistema operativo con pocos elementos visuales, puede llevarla a Tanto Android, como iOS y Windows Phone, tienen la ruina. Las recomendaciones son: no usar un sus preferencias tipográficas y su propio set de tamaño menor a 20px para los textos más peque- fuentes de sistema. Esto no quiere decir que el ños y en el caso de títulos, considerar tamaños que diseñador deba apegarse necesariamente a esta pueden llegar, incluso, a 70px. selección, pero elegir alguna de las opciones dis- ponibles ayudará a vincularse con la identidad de Jerarquías cada plataforma. En el caso de Android, la familia Droid Sans fue una Como elemento visual y componente de una de las más utilizadas y marcó una época dentro de interfaz, la tipografía también es susceptible de ser esa plataforma. Sin embargo, en las últimas versio- jerarquizada. Su importancia depende no solo de nes de este sistema operativo ha sido reemplazada la función que cumple, sino también de la informa- por Roboto, especialmente diseñada para móviles ción que contiene y su posición en pantalla. de alta resolución y con variantes que van desde Para definir diferentes niveles de protagonismo en una extra delgada hasta una black. un texto se puede apelar, además del tamaño, a las variantes —negrita, regular o light, por ejem- La fuente emblemática de iOS en los últimos años plo— y al color. ha sido Neue Helvética y es normal encontrar Un texto con mayor jerarquía sería aquel que se muchas aplicaciones que la usan. Con el paso del ubica como título principal de sección. Por otro tiempo se ha transformado casi en una marca de lado, en la información contenida dentro de una identidad de este sistema operativo; no obstante, fila en una lista, puede haber varias jerarquías, por hay más de 260 fuentes disponibles que pueden ejemplo, en el caso de un correo, podría verse el usarse de forma nativa7. nombre de la persona que lo envía, un resumen Windows Phone introdujo Segoe UI como un sello 28 Proyecto Avanzado de Diseño Avanzado Proyecto

que acompaña el estilo limpio, moderno y geomé- En textos trico de su interfaz. Aun así, cuenta con una serie El color se puede usar para destacar aquellas de familias tipográficas que la acompañan, sobre frases o palabras que pueden ser pulsadas, como todo en casos que requieren caracteres especiales enlaces. En este caso, es importante mantener la que no se encuentran en Segoe UI, como aquellos consistencia visual para permitir al usuario, intui- de idiomas extranjeros8. tivamente y a simple vista, saber cuáles son los Cada uno de estos sistemas operativos también elementos tipográficos interactivos. permite incorporar en el diseño fuentes adiciona- Otra función que cumple el color al ser usado en les a las predefinidas. Aunque esto sea posible, es textos es la de jerarquizar el contenido. La infor- importante recordar que variedad y calidad son mación complementaria puede ser destacada o dos cosas diferentes: muchas de las fuentes que minimizada dependiendo del color que se pueden encontrarse, no han sido pensadas ni pre- paradas especialmente para una buena legibilidad use; por ejemplo, aquella que reviste cierta impor- en pantalla. tancia podría destacarse en el texto con un color diferente. De la misma forma, el color también Color puede usarse para identificar información secun- daria, usando tonos más claros sin tanto protago- El color es un recurso vital en el diseño de una nismo. aplicación. Su uso abarca encabezados, textos, botones, fondos y muchos otros elementos que En fondos conforman la interfaz. En algunas ocasiones, está asociado a la identidad —color corporativo— y en En el caso del color de fondo, este debe estar en otras, responde a criterios estéticos y decisiones consonancia con el elegido para la tipografía, ya de diseño. que es necesario un contraste mínimo por cuestio- Un color por sí solo, salvo en el caso de colores nes de legibilidad y accesibilidad. reservados, no indica mucho. Como parte de un Hay que tener en cuenta que los fondos oscuros sistema cromático, el uso consistente, consciente y suelen cansar la vista más rápidamente, por lo tan- vinculado al contexto donde se aplica, es lo que lo to, si la app es de uso frecuente o requiere pasar llena de significado para el usuario. cierto tiempo leyendo, es conveniente revisar la 29 elección cromática y llevar el color de fondo hacia por ejemplo, para poner los diferentes títulos de alternativas más claras. Sin embargo, los colores sección y otros elementos interactivos que tengan oscuros en el fondo sí pueden ser una buena alter- incidencia en el contenido de la pantalla que se nativa cuando el contenido sea muy visual, como está viendo. fotografías o vídeos, ya que ayuda a resaltar estos Idealmente, como los encabezados están presen- elementos. tes en diferentes secciones de la aplicación, debe haber una consistencia cromática a medida que En elementos interactivos se navega por las diferentes partes de la app. Sin embargo, otras apps —como la del periódico inglés El color puede utilizarse como respuesta o feed- «The Guardian»— aprovechan los encabezados back a acciones concretas del usuario, un uso que para jugar con variaciones de color que marcan muchas veces no se tiene en cuenta. Para ilustrar una diferencia visual entre cada una de las seccio- con un ejemplo, los elementos seleccionados o nes. De esta forma, el encabezado sirve también pulsados, como botones o filas, pueden destacarse para extender su identidad visual, y al mismo con un color que indique visualmente dónde se ha tiempo darle una pista al usuario de la sección en pulsado, lo cual suele ser particularmente difícil de la que se encuentra. saber en un móvil. En el caso de elementos deshabilitados, general- Colores por defecto de cada sistema operativo mente el color es más claro que cuando están en su estado normal, incluso, puede apelarse al uso Android y Windows Phone usan temas —themes en de transparencias. De cualquier forma, el objetivo inglés— que afectan el color de sus aplicaciones y es indicar de una forma evidente que ese elemento pueden ser claros u oscuros. En Windows Phone la no producirá ningún efecto al ser pulsado. elección entre los temas disponibles está también En encabezados en manos del usuario, ya que pueden cambiarse Además de destacarlos como elemento principal, en las preferencias del teléfono, modificando la cuando el color se usa en encabezados tiene que visualización de la interfaz a través de todo el siste- armonizar completa- mente con el fondo y los ma operativo. otros elementos de la pantalla. A fin de cuentas, Todos los elementos nativos de las aplicaciones se se trata de un importante espacio que se usará, ven afectados por esta decisión: diálogos, botones 30 Proyecto Avanzado de Diseño Avanzado Proyecto

y fondos de listas se verán en consonancia con el de una lista de opciones en las preferencias, pero tema elegido. Sin embargo, en Windows Phone, también en este caso, la app puede haber optado respetar la elección del usuario queda en ma- por un color diferente. Mientras tanto, aunque su nos de cada aplicación, porque aun cuando este paleta cromática propone otras opciones que haya elegido un color para su tema, la app puede decidir usar una opción cromática diferente. Por pueden ser tenidas en cuenta a la hora de plan- ejemplo, incluso si el usuario elige un color oscuro tear el diseño visual, en Android se recomienda el como tema, la aplicación puede mostrar elemen- azul como color secundario. Por último, el caso tos en blanco si así se ha establecido previamente. de iPhone es diferente porque no usa temas. Su Mantener o no la selección que hace el usuario propuesta de color nativa, establecida por defecto, del tema, tiene ventajas y desventajas que deben se basa en la claridad: blanco y grises muy claros valorarse cuando se decide el diseño de la app. para fondos, barras de herramientas y encabe- Por ejemplo, usar el color del tema elegido brinda zados de secciones. Estos elementos cuentan consistencia visual y comodidad a través de todo también con cierta transparencia que deja ver lo el sistema operativo, además, el usuario se siente que se encuentran detrás. Mientras que el negro siempre dentro del mismo contexto. No obstante, se des- tina para elementos informativos, el azul la diferenciación res- se usa como color de resalte para tipografía en eti- pecto a otras apps puede ser baja y disminuye la quetas de botones y formularios, y otros elemen- posibilidad de incorporar a la aplicación los colo- tos que necesitan destacarse (íconos, pestañas res corporativos. seleccionadas, controles). Aun así, los colores de En Android, la elección del tema no es una opción estos elementos pueden cambiarse fácilmente. para el usuario; son los diseñadores quienes deben decidir si aplicar temas oscuros o claros a toda la El lenguaje: cuidando las palabras aplicación, o solo a determinadas pantallas. En los dos casos, los colores de los temas se com- En una aplicación hay infinidad de lugares donde binan con otros secundarios que tienen la función usar textos: en encabezados y títulos, botones, de resaltar aquellos elementos que requieren aten- mensajes de error y avisos en pantallas vacías. En ción. En Windows Phone, este color secundario cada caso, las palabras son tan importantes como también puede ser elegido por el usuario dentro el elemento gráfico que las contiene o acompaña. 31 Lenguaje textual y visual van de la mano, unidos lenguaje que se utiliza. No es lo mismo hablarle a para lograr una experiencia de usuario consistente un niño que a un adulto, como no es igual dirigirse en todos los sentidos. a un usuario técnico que a un principiante tecnoló- gico. Todo influye en la elección de las palabras. La incidencia de la palabra equivocada En el mundo de las aplicaciones se tiende a llevar a Cómo formular una frase es algo que generalmen- un plano muy tecnológico la forma de expresarse, te no suele considerarse importante en un primer esto hace que muchas veces se escriban mensajes momento, pero tiene influencia directa en la forma cargados de tecnicismos o palabras complejas que en que el usuario usa la aplicación y se relaciona un usuario no preparado podría tener dificultad con ella. Por ejemplo, escribir mal la etiqueta de para asimilar o que suenan demasiado duras. Por un botón —el texto que contiene— puede llevar ejemplo, la palabra «acceder» puede ser simple- a confusiones sobre el resultado de la acción que mente reemplazada por «entrar», un sinónimo indica, provocando incertidumbre y frustración en mucho más ameno. el usuario que se equivoca. Situaciones como esta son habituales. Aunque Comunicando errores pueda parecer obvio, un mensaje debe ser com- prendido fácilmente por el usuario, sin obligarlo La manera de comunicar los errores merece un a esforzarse para interpretarlo. Esto se consigue, párrafo aparte. De entrada, esta es una situación entre otras cosas, con un lenguaje simple y directo; estresante o desagradable para el usuario, pero a haciendo gala de la economía de palabras, donde través de mensajes amables —que no usen tecni- lo importante se dice primero y lo innecesario, no cismos incomprensibles o un tono acusatorio— se dice. puede sobrellevarse de una forma menos traumá- tica. Un ejemplo de esto, es el sentido del humor El receptor para comunicar los errores de Textos en otros idiomas Como cualquier mensaje, una aplicación también Como comentario adicional, se puede mencionar tiene un receptor. Conocer quién es, permite saber que cuando la aplicación está disponible en dife- cómo hablarle. Esto es importante para deter- rentes idiomas, hay que tener cuidado al incorpo- minar la forma en que se articulan las frases y el rar los textos traducidos para asegurase de que 32 Proyecto Avanzado de Diseño Avanzado Proyecto

sigan viéndose correctamente en el espacio visual listas que no alcanzan a cubrir toda la pantalla o que tienen asignado. Dependiendo del idioma, los gráficos contenedores donde aparecerán las algunas palabras son —a veces mucho—más largas imágenes una vez que estén cargadas. que en el idioma original y podrían verse cortadas u ocultas bajo otros elementos de la interfaz. Gráficos efímeros Detalles visuales Es verdad que la diferencia radica en los detalles. Es necesario considerar también el diseño de Ellos pueden separar una aplicación regular de aquellos elementos que aparecen por poco tiempo una genial. En una primera instancia no se presta en la pantalla. Por ejemplo, si la conexión es lenta, atención a estos detalles que mejoran la experien- puede ser que el usuario tenga que pasar más cia del usuario e incluso, cambian su estado de tiempo de lo esperado viendo la pantalla de carga ánimo; y es normal, al principio hay otros aspectos y en ese caso, estos detalles visuales tienen su de diseño de los cuales hay que ocuparse. Pero a momento de gloria. medida que la interfaz va llegando a su fin, es im- Secretos visuales portante considerarlos para no pasar por alto algo A la hora de darse pequeños lujos visuales, se pue- que pueda arruinar el trabajo realizado. de pensar en aquellos gráficos que están ocultos a primera vista, que no son de fácil acceso para el Pantallas vacías usuario, pero que una vez descubiertos generan un placer especial ayudados por la complicidad. Por Los diseños tienen que considerar no solo los ejemplo, en la escenarios ideales, como una lista que ya está (Diseño Visual. (Vittone and Cuello, 2015)) completa o una pantalla llena. Es necesario plan- tear también el diseño para cuando la aplicación comienza a ser utilizada y aún no se dispone de cierta información. Por ejemplo, cómo se vería una pantalla vacía, sin ítems, cuando todavía no hay nada para mostrar. Otro escenario a tener en cuenta, es aquel relacio- nado con los fondos que irán detrás de aquellas 33 34 Proyecto Avanzado de Diseño Avanzado Proyecto

RESULTADOS

ETAPA DE DISEÑO BOCETOS DEL NOMBRE

35 NOMBRE

Enrútate Este nombre surge debido a que hace referencia a la palabra ruta lo que significa una dirección, indica un camino, que va de un lugar a otro. Además se usan flechas ya que están indican una dirección.

BOCETOS DIGITALES

2436 Proyecto Avanzado de Diseño Avanzado Proyecto Proyecto Avanzado de Diseño Avanzado Proyecto

3725 RESULTADOS

SELECCIÓN DE TIPOGRAFÍA

la tipografía source sans pro es una tipografía clara, además es palo seco lo que permite una mayor le- gibilidad en la web y cuneta con diferentes estilos tipográficos lo que permite realizar jerarquías.

SOURCE SANS PRO EXTRALIGHT SOURCE SANS PRO SEMIBOLD SOURCE SANS PRO EXTRALIGHT ITALIC SOURCE SANS PRO SEMIBOLD ITALIC

SOURCE SANS PRO LIGHT SOURCE SANS PRO BOLD SOURCE SANS PRO LIGHT ITALIC SOURCE SANS PRO BOLD ITALIC SOURCE SANS PRO REGULAR SOURCE SANS PRO BLACK SOURCE SANS PRO ITALIC SOURCE SANS PRO BLACK ITALIC

3826 Proyecto Avanzado de Diseño Avanzado Proyecto

PANTALLAZOS

Para el diseño de la aplicación, fue necesario realizar una investigación acerca de lo mas adecuado a la PERFI L hora de realizar una app. como resultado se encontró que es mejor que sea simple y facil de entender, por esto se busco que la palicacion tuviera iconos que representaran muy quien cada una de sus funciones para que asi se lograra mayor interacción con el usuario.

PRIMER ELEMENTO DIFERENCIADOR

Uno de los elementos diferenciadores que existen en 20% la app es “ prueba tu suerte” este es un mecanismo que funciona de manera aleatoria, allí se obtienen descuentos desde el 10% hasta el 30% . Generar código Este descuento podrá ser redimido en establecimien- tos aliados y ademas se debe realizar en presencia de l personal del establecimiento.

39 PERFIL

ENRÚTATE Y MCDONALD`S SE UNEN PARA DARTE

SEGUNDO ELEMENTO DIFERENCIADOR Aplic a para usuario s de la aplicación Enrút ate. Valid o un cupó n por persona. Esta promoció n no es acumulable con otros cupones. no es valido para domicilios. Enrútate no se hace responsable por la prestación del servicio ofrecido, únicamente facilita el medio para la consecución de El siguiente elemento diferenciador es que la app un descuento a través de los cupones ofertados. permite que los establecimientos publiquen sus cu- pones de descuentos, promociones, bonos de regalo, Muestra esta imagen en el establecimiento para adquirir tu cupón y de esta manera el usuario pueda acceder a ellos.

2840 Proyecto Avanzado de Diseño Avanzado Proyecto Proyecto Avanzado de Diseño Avanzado Proyecto

PERFI L

$ 0

TERCER ELEMENTO DIFERENCIADOR Adquirir punto s Este elemento diferenciador permite acumular pun- tos los cuales son redimidos por el cliente cuanto el lo desee, este mecanismo funciona verificando tu po- sición gps y de esta manera te obsequia 100 puntos . La verificación solo se puede realizar una vez por establecimiento al día y además solo se realizara en lugares aliados con la aplicación. Inicio / Punto s

2941 PANTALLAZOS

LEI DY GÓME Z PERFIL

PERFIL

MI A GEND A

MIS PUN TOS

AÑADIR EVEN TO

PRUEBA TÚ SUER TE Cambiar foto

CUPÓN DEL DÍ A

Le idy Gómez

Correo Electroni co

Cambiar c ontr aseñ a

Inicio / PERFI L 3042 Proyecto Avanzado de Diseño Avanzado Proyecto

PERFIL

Verificar mi posición

MI AGEND A

LO RE M IM PSUM Cine C o Le er más lo m b ia Estren o

Tu evento se ha añadido exitosamente

LO REM IMPSUM Le er más 8:00 am a 11:00pm Carr er a 35a Nº 3 a 2 4

LO REM IMPSUM Actual Le er más lorem ipmsum 1P233A4DWDC

Inicio / Ag enda

43 ENRÚ TA TE

ENRÚ TA TE

¿Q U É BUSCAS? INICIO

RE CO M ENDADOS

Iniciar sesión con Faceboo k TEA TRO CIGUEÑA S MUNICI PA L ES TRENO

Iniciar sesión ENTRETENIMIEN TO

Crear una cuent a Olvide mi contraseña GO GREEN LIVING NIGHT PERFIL FITNES S FOOD CL UB

44 Proyecto Avanzado de Diseño Avanzado Proyecto

Le idy Gomez // Cerr ar Sesió n Le idy Gomez // Cerr ar Sesió n Le idy Gomez // Cerr ar Sesió n

CO MIDA S CO MIDA S CO MIDA S

CA TEGORÍAS SELE CC IONA LAS C AT EGORÍAS

ZO NAS GAS TRONÓMICAS Pa rq ue del Pe rr o San Antoni o LO REM IMPSUM Gr anad a 8:00 am a 11:00p m Le er más Ciudad Ja rd in Car re ra 35a Nº 3 a 2 4 Pe ñón La 66 Pa rq ue del chon ta duro Alamed a LO REM IMPSUM La 44 Norte Le er más 8:00 am a 11:00p m Car re ra 35a Nº 3 a 2 4 LO REM IMPSUM Lo re m ipsu m dolor s it a me t, Zo ológi co 8:00 am a 11:00p m consecte tu r adipiscing e li t. Car re ra 35a Nº 3 a 24 Suspendisse posuere, dui et tempor San Cay et ano volut pat, odi o feli s consecte tur Ru ta Salsa 315 578 6621 lectus, id scelerisque massa posuere, dui et tempo r volut pat, odi o feli s Novena consecte tur lectus , id scelerisque AG REGAR A mass a posuere , du i et t empo r F lor a MI AGEND A volut pat, odi o feli s consecte tur LO REM IMPSUM lectus, id scelerisque massa. To do s Le er más 8:00 am a 11:00p m LI ST O Car re ra 35a Nº 3 a 24 ¿C ómo lleg ar ?

Inicio / Comidas Inicio / Comidas / To do s Inicio / Comidas / To dos / Ar chie s

45 Le idy Gomez // Cer ra r Sesió n Le idy Gomez // Cer ra r Sesió n

VIDA NOC TURN A SALUD

CA TEGORÍAS CA TEGORÍA S

LO REM IMPSUM LO REM IMPSUM 8:00 pm a 6:00 a m 24 hor as Le er más Le er más Carrer a 35a Nº 3 a 2 4 Carrer a 35a Nº 3 a 2 4

LO REM IMPSUM LO REM IMPSUM Le er más 8:00 pm a 3:00 a m Le er más 24 hor as Carrer a 35a Nº 3 a 2 4 Carrer a 35a Nº 3 a 2 4

LO REM IMPSUM LO REM IMPSUM Le er más 8:00 pm a 3:00 a m Le er más 24 hor as Carrer a 35a Nº 3 a 2 4 Carrer a 35a Nº 3 a 2 4

Inicio / Vida Nocturna / To do s Inicio / Salud / To do s

46 Proyecto Avanzado de Diseño Avanzado Proyecto

ENTRETENIMIENT O CU LT UR A

CA TEGORÍA S CA TEGORÍA S

LO REM IMPSUM LO REM IMPSUM Cine Colombia Actual Le er más Le er más Estreno lorem ipmsum

LO REM IMPSUM LO REM IMPSUM Le er más 9:00 am a 9:00 a m Le er más 9:00 am a 9:00 a m Carrer a 35a Nº 3 a 2 4 Re mb ra nt

LO REM IMPSUM LO REM IMPSUM Le er más 8:00 am a 12:00 pm Le er más Rser va natur al Es ta dio de beisb al l Pa nc e

Inicio / Entre tenimiento / To do s Inicio / C ultu ra / To do s

47 PALETA DE COLORES

La paleta de color quiere lograra representar a Cali una ciudad acogedora, cálida con gran biodiversi- dad, que además cuenta con un clima caliente. Pero también representa el turismo que es diversidad, cultura , raza, religión.

R:255 R:255 R:229 R:243 R:17 R:84 G:179 G:6 G:51 G:119 G:208 G:208 B:0 B:176 B:52 B:6 B:176 B:9

4836 Proyecto Avanzado de Diseño Avanzado Proyecto PRUEBAS DE USUARIO

En esta etapa participaron 6 personas que se encon- traban dentro de un rango de edad de 14 a 37 años. Se les pidió que utilizaran la aplicación y después nos contaran que tan fácil fue usarla, y que errores encontraron a la hora de interactuar con ella.

Botones del tamaño de la imagen

Las mayores categorías de interés son comi- das, entretenimiento y vida nocturna

Se muestra interés por el uso de descuentos.

Leer más

49 50 Proyecto Avanzado de Diseño Avanzado Proyecto

CONCLUSIONES

El proyecto ha sido muy enriquecedor pues me ha permitido empaparme un poco del mundo de la programación, esto ha permitido que desarrolle mi proyecto de grado que tiene el fin de conectar a los usuarios con sitios de interés del turismo de la ciudad de Cali

Me siento feliz de poder retribuirle a la universidad las enseñanzas recibidas, es satisfactorio, aprendí mucho de este proyecto, puse en práctica los cono- cimientos adquiridos. El proceso de validar todo un proyecto ante la institución y la posibilidad de aplicar lo creado hace que los esfuerzos que se pusieron en este trabajo, sea compensado por la satisfacción del logro cumplido.

51 52 Proyecto Avanzado de Diseño Avanzado Proyecto

BIBLIOGRAFÍA

Cali, T. y. (28 de Noviembre de 2015). Wikipedia la enciclopedia libe. Recuperado el 24 de Agosto de 2016, de https://es.wikipedia.org/wiki/Turis- mo_y_recreaci%C3%B3n_en_Cali#Referencias Marín, J. Á. (Febrero - Abril de 2010). LA ERA DIGITAL: NUEVOS MEDIOS, NUEVOS USUARIOS Y NUEVOS PROFESIONALES. Razón y Palabra.

Serrano, C. E., & Escobar, J. M. (2012). Desa- rrollo de aplicaciones para tecnologías móviles. Revista Tecnologica.

Cali, A. d. (01 de Diciembre de 2015). Obtenido de http://www.cali.gov.co/

Vittone, J. and Cuello, J. (2015). Diseño Visual. In: J. Vittone and J. Cuello, ed., Diseñando apps para moviles, 1st ed. España, pp.125,148.

Cali, A. d. (01 de Diciembre de 2015). Obtenido de http://www.cali.gov.co/

53