5

CAPITULO II DESARROLLO

6

CAPITULO II

DESARROLLO

1. BASES TEORICAS

En este punto se desarrollan las bases teóricas que se necesitan y sirven

como fundamento al momento para el diseño de una interfaz para aplicación

móvil sobre el Sistema Teleférico Mukumbarí ubicado en Mérida, basado en

los aportes de diversos autores, los cuales se utilizaran como soporte para

validar la información plasmada y así obtener los resultados esperados.

1.1. DISEÑO GRÁFICO

Según Wong. W (2009) expresa que el diseño es un proceso de

creación visual con un propósito. A diferencia de la pintura y de la escultura,

que son la realización de las visiones personales y los sueños de un artista,

el diseño cubre exigencias prácticas. Una unidad de diseño gráfico debe ser

colocada frente a los ojos del público y transportar un mensaje prefijado. Un

producto industrial debe cubrir las necesidades de un consumidor.

13

14

De acuerdo a ISCID (2004) el diseño puede definirse como la actividad

creativa cuyo propósito es establecer las cualidades multifacética de objetos,

procesos, servicios en su ciclo completo de vida. Por lo tanto, el Diseño es el

factor principal de la humanización innovadora de las tecnologías y el factor

crítico del intercambio cultural y económico.

Visto desde la perspectiva de estos dos autores se puede concluir que

el diseño no es más que un proceso con pautas a seguir que van desde la

creación visual hasta transportar un mensaje, además de que se crea bajo

los factores de tecnología e innovación que conlleva al intercambio cultural y

económico mientras cubre las necesidades del consumidor a quien va

dirigido el producto o servicio.

1.2. DISEÑO DIGITAL

Royo J. (2004) describe el Diseño digital como un esfuerzo por

establecer un marco teórico en un campo de estudio muy mediatizado por las

tecnologías que lo hacen posible. La disciplina del diseño digital es la

responsable del uso y la comunicación de los espacios y las herramientas

que se generan en los mismos para así introducir procesos de innovación

que adecuan en medio a las nuevas necesidades y uso.

15

No obstante, Wong W (2001) describe al Diseño digital como el lenguaje

que abarca en primer lugar los métodos y los procedimientos que hay que

usar para crear líneas, formas y tipografía, que se tienen a disposición en los

colores, sombras y tramas que se desea. Además, estos elementos se

pueden alinear, distribuir, duplicar y transformar de forma instantánea. En

esta nueva era se debería manejar un nuevo lenguaje visual, por lo que es

posible se haya redefinido por completo los principios que guiaban el diseño

tradicional.

Visto desde la perspectiva de ambos autores se concluye que el

diseño digital es un medio en constante desarrollo gracias a las nuevas

tecnologías, que se encargan de proporcionar nuevas herramientas que

faciliten la comunicación y la innovación en los procesos, pero difieran en el

lenguaje y procedimientos que se establecen para la buena elaboración de

un diseño en el ámbito digital.

1.3. DISEÑO WEB

Mejía B. (2014) define al Diseño Web como un nuevo campo de

acción, que consiste en la planificación, diseño e implementación de

elementos visuales para pantalla de computador, que organiza información

en base a una estructura jerárquica, valiéndose de los recursos propios del

diseño gráfico, diseños que se consideran comúnmente como páginas y que

16

se organizan en sitios vía web. Se le considera dentro del diseño

multimedia, se fundamenta en la aplicación de los principios o directrices

básicas del diseño a un nuevo espacio, conocido como el ciberespacio que

tiene características que lo hacen único, ya que reúne la posibilidad de la

interactividad con la multimedia. Requiere tener en cuenta cuestiones tales

como navegabilidad, interactividad, usabilidad, arquitectura de la

información y la integración de medios como el audio, texto, imagen y vídeo.

Así mismo Lamarca M. (2013) describe el Diseño Web como una

nueva generación donde prima tanto el diseño gráfico como la tecnología.

Los web masters ya no son sólo diseñadores gráficos, sino expertos

informáticos que han de conocer los nuevos lenguajes, dominar las nuevas

herramientas de programación, conectividad a base de datos, seguridad,

entre otros.

El hipertexto ya no es una colección de textos enlazados, sino un

espacio de intercambio de servicios de todo tipo: culturales, informativos,

comerciales, sociales, entre otros. Son muchos los factores que hay que

tener en cuenta a la hora de diseñar un sitio web. Sin embargo, dos factores

destacan sobre los demás: su contenido y el diseño de la interfaz. Los

arquitectos de la información se ocupan ahora del diseño centrado tanto en

el uso, como en el usuario para hacerle a éste las tareas lo más sencillas

posibles.

17

Las evidencias anteriores coinciden en que el diseño web es un

derivado del diseño gráfico unido a la tecnología pero difieren en la

organización y los recursos que se necesitan, ya que Mejías habla sobre que

el diseño web se rige bajo directrices y parámetros que pueden asociarlo al

diseño multimedia y Lamarca M. habla sobre el personal altamente

capacitado que debe considerarse al momento de crear una página web y

que el diseño web no es más que un hipertexto dominado por nuevas

herramientas, lenguajes de programación y diseño.

1.4. DISEÑO MULTIMEDIA

Behocaray G. (2010) expresa que el concepto multimedia refiere a

cualquier objeto o sistema que utiliza múltiples medios de expresión, físicos o

digitales, para presentar o para comunicar determinada información. El

diseño multimedia combina los distintos soportes de la comunicación: el

texto, el sonido, la imagen, la fotografía, la animación gráfica y el video; de

una forma interactiva, creando un vínculo participativo con el usuario.

Igualmente, García G. (2011) define al diseño multimedia como una

herramienta efectiva que se utiliza para transmitir un mensaje, ayudándose

principalmente del diseño gráfico que es la disciplina que se encarga de

ordenar la información de manera estética y legible para que capte la

atención, transmita el significado del mensaje y que este sea recordado por

18

los espectadores. Actualmente aplicada a medios electrónicos, se vale del

diseño gráfico para combinar: textos, imágenes, colores, animaciones,

videos, espacios, audio e interacción en una aplicación informativa o

promocional.

De acuerdo con los autores anteriormente expuestos el diseño

multimedia se expresa como una disciplina a que se deriva del diseño

gráfico, donde se unen varios aspectos para la elaboración del mismo como

lo son el combinar textos, imágenes, colores, animaciones, videos, espacios,

audio e interacciones para la funcionalidad, legibilidad y entendimiento del

mismo con respecto a los usuarios.

1.5. INTERFAZ DE USUARIO

Morver P. (2010) define como interfaz de usuario o UI también llamada

interfaz a secas es el medio por el que una persona controla un software o

hardware. Las primeras interfaces de usuario fueron las batch, muy

rudimentarias; los usuarios debían adaptarse a las computadoras y el

software se desarrollaba para mantener el procesador a su máxima

capacidad. El input eran tarjetas perforadas. En la actualidad en casi todos

los programas de software la interfaz de usuario suele ser grafica GUI. El

primer ordenador que empleaba una fue el Xerox Alto y de ese hasta

nuestros días.

19

Según Acosta A. y Zambrano N. (2004) se define la interfaz de usuario

como la parte accesible de un sistema computacional, tanto hardware como

software, que permite al usuario interactuar con el sistema. El diseño de una

buena interfaz se ha vuelto parte integral y relevante para las aplicaciones

interactivas. Un sistema de software puede no tener aceptación si su interfaz

es pobre (independientemente de que el software sea confiable y eficiente).

El costo de desarrollo de una interfaz representa, en muchas aplicaciones,

un porcentaje alto del costo de desarrollo de la aplicación.

1.6. EXPERIENCIA DE USUARIO

Garrett J. (2000) expone que la experiencia de usuario, la UX

(acrónimo de Experiencia de Usuario en inglés) es famosamente complicada

de describir y en algunos aspectos un concepto controvertido. Se trata de

Las percepciones de una persona y las respuestas que resultan de la

utilización o utilización prevista de un producto, sistema o servicio.

Según D'Hertefelt (2000) la Experiencia del Usuario representa un

cambio emergente del propio concepto de usabilidad, donde el objetivo no se

limita a mejorar el rendimiento del usuario en la interacción - eficacia,

eficiencia y facilidad de aprendizaje-, sino que se intenta resolver el problema

estratégico de la utilidad del producto y el problema psicológico del placer y

diversión de su uso.

20

Con referencia a las definiciones planteadas se puede concluir que la

experiencia de usuario se encarga de establecer una relación familiar y

consistente entre consumidor y marca, analizar los factores que influyen en la

adquisición o elección de un determinado producto y también analizar cómo

los consumidores usan el producto y la experiencia resultante de su uso.

1.7. DISEÑO DE INTERFAZ

Según Bonsiepe G. (1998) menciona que existe un agente social que

requiere cumplir una acción, la cual es en sí una tarea porque hay un objetivo

particular involucrado; así, el usuario necesita un artefacto para ejecutar

dicha tarea. Todo el proceso puede ser visto como una unidad compuesta de

tres elementos heterogéneos: el usuario, el objetivo de una acción y un

artefacto. Luego, según comenta, la conexión de estos tres elementos puede

ser establecida únicamente vía una interfaz. La interfaz no es un objeto, es

un espacio en el cual recae la interacción entre el cuerpo, la herramienta y el

objeto de acción.

Mientras tanto Fernández A. (2010) define al Diseño de interfaz como

el conjunto gráfico que permite la presentación y la navegación del sitio. Esto

se consigue con la inclusión de elementos gráficos comunes a toda la web

que son estándares, haciendo que los usuarios tengan completo control

sobre las funcionalidades del sitio desde el momento mismo de entrar a él sin

21

que para ello deba tener amplios conocimientos ni preparación anterior

alguna.

Vinculando ambos conceptos se puede concluir que el diseño de

interfaz hace hincapié en la interacción del usuario con el objeto de acción y

esta puede relacionarse al diseño web como al diseño de aplicaciones

móviles. Además, se necesita la inclusión de elementos gráficos en la

creación de este proceso.

1.8. DISEÑO DE INTERFAZ GRAFICA DE USUARIO

Según V Congreso ISKO-España (2000) define el diseño de la interfaz

gráfica de usuario (GUI - Graphic user interface), se puede controlar cada

pixel de la pantalla; cómo presentar una caja de dialogo, para que en todas

las pantallas de los usuarios sean exactamente la misma. Se sabe para qué

sistema se está diseñando, las fuentes de las letras que están instaladas, el

tamaño de la pantalla y se tiene la guía de estilo del vendedor que nos dice

las reglas para combinar las distintas interacciones.

De igual manera Bonsiepe G. (1998) define el diseño de interfaz

gráfica de usuario como un método de interactuar con una computadora a

través de una metáfora de manipulación directa de imágenes y widgets en

una adición de texto, frecuentemente con una visualización de naturaleza

22

icónica o textual, el cual representa algo que puede ser encontrado en el

mundo real donde puede funcionar a su vez como una interfaz básica.

Dentro del conjunto de ideas expresadas por estos dos autores se

puede definir al diseño de interfaz gráfica de usuario como el conjunto de

atributos sensoriales y funcionales de un sistema que necesita de imágenes,

iconos, tipografía y color para que al momento de que el usuario opere en él,

sea agradable a la vista.

1.9. DISEÑO PARA LA EXPERIENCIA DE USUARIO

Según la UXPA (2014) el diseño de la Experiencia del Usuario como

disciplina se ocupa de todos los elementos que componen esa interfaz,

incluyendo el layout, diseño visual, de texto, la marca, el sonido y la

interacción. Claramente es una definición más amplia. Una interfaz puede ser

excelente pero aun así la experiencia de usuario puede ser fallida.

Saffer D. (2013) define el diseño para la experiencia de usuario como

una filosofía de diseño que tiene por objetivo la creación de productos que

resuelvan necesidades concretas de sus usuarios finales, consiguiendo la

mayor satisfacción y mejor experiencia de uso posible con el mínimo

esfuerzo. Toma forma como un proceso en el que se utilizan una serie de

técnicas multidisciplinares y donde cada decisión tomada debe estar basada

23

en las necesidades, objetivos, expectativas, motivaciones y capacidades de

los usuarios.

Las ideas y reflexiones expuestas por estos autores sobre el diseño

para la experiencia de usuario facilita la creación de diversos proyectos,

basándose principalmente en las actividades que deben realizarse como lo

son investigación, arquitectura de información, diseño de interacción, entre

otros; también puede decirse que el diseño UX es un puesto de trabajo ya

que estos profesionales se encargan de planificar la arquitectura, dibujar los

wireframes, el diseño de la interfaz e incluso código de las páginas además

de que poseen habilidades de psicología cognitiva, interacción persona-

ordenador y diseño de investigación.

1.10. APLICACIÓN WEB

ALEGSA (2012) también conocida como web application o web App.

Una aplicación web es cualquier aplicación que es accedida vía web por

una red como internet o una intranet. Una de las ventajas de las aplicaciones

web cargadas desde internet (u otra red) es la facilidad de mantener y

actualizar dichas aplicaciones sin la necesidad de distribuir e instalar un

software en, potencialmente, miles de clientes. También la posibilidad de ser

24

ejecutadas en múltiples plataformas por la fácil portabilidad de estas

aplicaciones en los navegadores web.

Sin embargo TENDENCIAS 21, Madrid (2014), define a la aplicación

web como aquella que se puede abrir en todos los dispositivos móviles, sean

de la marca que sean y del sistema operativo que sean. Estas Apps se abren

en el navegador del dispositivo y son populares debido a su facilidad de

actualización y rapidez de distribución.

Las conclusiones derivadas de los autores ya expuestos concluyen

que las aplicaciones web son diferentes a las páginas web, ya que en una se

necesita internet para navegar por ella en cambio en la otra solo se necesita

un dispositivo que pueda leer esta herramienta.

1.11. APLICACIÓN MULTIMEDIA

Belloch C. (2001) hace referencia que la aplicación multimedia

Actualmente, al uso combinado de diferentes medios de comunicación: texto,

imagen, sonido, animación y video. Los programas informáticos que utilizan

de forma combinada y coherente con sus objetivos diferentes medios, y

permiten la interacción con el usuario son aplicaciones multimedia

interactivas. La evolución producida en los sistemas de comunicación ha

dado lugar a este tipo heterogéneo de aplicaciones o programas que tienen

dos características básicas:

25

Multimedia: Uso de múltiples tipos de información (textos, gráficos,

sonidos, animaciones, videos, entre otros) integrados coherentemente.

Hipertexto: Interactividad basada en los sistemas de hipertexto, que

permiten decidir y seleccionar la tarea que deseamos realizar, rompiendo la

estructura lineal de la información.

Smith S (2017) Las aplicaciones multimedia pueden incluir muchos

tipos de medios. La característica principal de un sistema multimedia es el

uso de más de un tipo de medio para entregar contenido y funcionalidad. Los

programas informáticos web y de escritorio pueden implicar componentes

multimedia. Al igual que distintos elementos de medios, una aplicación

multimedia normalmente implicará código de programación e interacción de

usuario mejorada. Los elementos multimedia generalmente caen dentro de

una de cinco categorías principales y usan variadas técnicas para el formato

digital.

En cuanto a las aplicaciones multimedia se refiere, se puede concluir

que estas combinan diferentes medios de comunicación para permitir la

integración de diferentes objetivos que a su vez se encargan de la

interacción de programas informáticos para su eficaz elaboración.

26

1.12. APLICACIÓN MOVIL

Según Cuello J. y Vittone J. (2013) una aplicación móvil puede

definirse como un software que ha estado presente en los teléfonos desde

hace tiempo; de hecho, ya estaban incluidas en los sistemas operativos de

Nokia o Blackberry años atrás. Los móviles de esa época, contaban con

pantallas reducidas y muchas veces no táctiles, y son los que ahora

llamamos feature phones, en contraposición a los smartphones, más

actuales. Actualmente encontramos aplicaciones de todo tipo, forma y color,

pero en los primeros teléfonos, estaban enfocadas en mejorar la

productividad personal: se trataba de alarmas, calendarios, calculadoras y

clientes de correo. Gracias a esto se generaron nuevos modelos de negocio

que hicieron de las aplicaciones algo rentables, tanto para desarrolladores

como para los mercados de aplicaciones, como App Store, Google Play y

Windows Phone Store.

Al mismo tiempo, también mejoraron las herramientas de las que

disponían diseñadores y programadores para desarrollar App, facilitando la

tarea de producir una aplicación y lanzarla al mercado, incluso por cuenta

propia.

27

ALEGSA (2012) expresa por otra parte que las aplicaciones móviles

son aquella desarrollada especialmente para ser ejecutada en dispositivos

móviles como un teléfono celular, tabletas y similares. Estas aplicaciones

tienen características especiales para poder funcionar en estos dispositivos

móviles que, por lo general, tienen menos capacidad de procesamiento y

almacenamiento que computadoras de escritorio o notebooks.

Estas definiciones expresan similitudes y contradicciones en cuanto a

aplicaciones móviles se refiere ya que estas se generan por una necesidad

que tiene el usuario de obtener la información más rápido a menor tiempo.

Estas se diseñan para diferentes formatos como lo son teléfonos

inteligentes, tabletas y otros dispositivos móviles y que permite al usuario

efectuar una tarea concreta de cualquier tipo: profesional, de ocio,

educativas, de acceso a servicios, entre otros., facilitando las gestiones o

actividades a desarrollar.

1.13. PROCESO Y DESARROLLO DE UNA APP MOVIL

Según Cuello J. y Vittone J. (2013) El proceso de diseño y desarrollo de

una aplicación, abarca desde la concepción de la idea hasta el análisis

posterior a su publicación en las tiendas. Durante las diferentes etapas,

diseñadores y desarrolladores, trabajan la mayor parte del tiempo, de

manera simultánea coordinada.

28

1.13.1. CONCEPTUALIZACIÓN

El resultado de esta etapa es una idea de aplicación, que tiene en

cuenta las necesidades y problemas de los usuarios. La idea responde a una

investigación preliminar y a la posterior comprobación de la viabilidad del

concepto.

a) Ideación

b) Investigación

c) Formalización de la idea

1.13.2. D E F I N I C I Ó N

En este paso del proceso se describe con detalle a los usuarios para

quienes se diseñará la aplicación, usando metodologías como «Personas» y

«Viaje del usuario». También aquí se sientan las bases de la funcionalidad,

lo cual determinará el alcance del proyecto y la complejidad de diseño y

programación de la App.

a) Definición de usuarios

b) Definición funcional

29

1 . 1 3 . 3 . D I S E Ñ O

En la etapa de diseño se llevan a un plano tangible los conceptos y

definiciones anteriores, primero en forma de wireframes, que permiten crear

los primeros prototipos para ser probados con usuarios, y posteriormente, en

un diseño visual acabado que será provisto al desarrollador, en forma de

archivos separados y pantallas modelo, para la programación del código.

a) Wireframes

b) Prototipos

c) Test con usuarios

d) Diseño visual

1.13.4. D E S AR R O L L O

El programador se encarga de dar vida a los diseños y crear la

estructura sobre la cual se apoyará el funcionamiento de la aplicación. Una

vez que existe la versión inicial, dedica gran parte del tiempo a corregir

errores funcionales para asegurar el correcto desempeño de la App y la

prepara para su aprobación en las tiendas.

30

a) Programación del código

b) Corrección de bugs

1 . 1 3 . 5 . P U B L I C AC I Ó N

La aplicación es finalmente puesta a disposición de los usuarios en las

tiendas. Luego de este paso trascendental se realiza un seguimiento a través

de analíticas, estadísticas y comentarios de usuarios, para evaluar el

comportamiento y desempeño de la App, corregir errores, realizar mejoras y

actualizarla en futuras versiones.

a) Lanzamiento

b) Seguimiento

c) Actualización

Gráfico #1 Proceso y Desarrollo de una App Móvil. Fuente: Díaz y Matheus (2017).

31

1.14. TIPOS DE APLICACIÓN MOVIL

Según Cuello J. y Vittone J. (2013) A nivel de programación, existen

varias formas de desarrollar una aplicación. Cada una de ellas tiene

diferentes características y limitaciones, especialmente desde el punto de

vista técnico. Aunque a primera vista esto no parezca incumbencia del

diseñador, la realidad es que el tipo de aplicación que se elija, condicionará

el diseño visual y la interacción.

1.14.1. APLICACIONES NATIVAS

Las aplicaciones nativas son aquellas que han sido desarrolladas con

el software que ofrece cada sistema operativo a los programadores, llamado

genéricamente Software Development Kit o SDK. Así, Android, iOS y

Windows Phone tienen uno diferente y las aplicaciones nativas se diseñan y

programan específicamente para cada plataforma, en el lenguaje utilizado

por el SDK.

Además, no requieren Internet para funcionar, por lo que ofrecen una

experiencia de uso más fluida y están realmente integradas al teléfono, lo

32

cual les permite utilizar todas las características de hardware del terminal,

como la cámara y los sensores (GPS, acelerómetro, giróscopo, entre otros).

A nivel de diseño, esta clase de aplicaciones tiene una interfaz basada

en las guías de cada sistema operativo, logrando mayor coherencia y

consistencia con el resto de aplicaciones y con el propio SO. Esto favorece la

usabilidad y beneficia directamente al usuario que encuentra interfaces

familiares.

1.14.2. APLICACIONES WEB

La base de programación de las aplicaciones web, también

llamadas webapps, es el HTML, conjuntamente con JavaScript y CSS. En

este caso no se emplea un SDK, lo cual permite programar de forma

independiente al sistema operativo en el cual se usará la aplicación. Por eso,

estas aplicaciones pueden ser fácilmente utilizadas en diferentes plataformas

sin mayores inconvenientes y sin necesidad de desarrollar un código

diferente para cada caso particular.

Las aplicaciones web no necesitan instalarse, ya que se visualizan

usando el navegador del teléfono como un sitio web normal. Por esta misma

33

razón, no se distribuyen en una tienda de aplicaciones, sino que se

comercializan y promocionan de forma independiente.

1.14.3. APLICACIONES HÍBRIDAS

Este tipo de aplicaciones es una especie de combinación entre las dos

anteriores. La forma de desarrollarlas es parecida a la de una aplicación web,

usando HTML, CSS y JavaScript, y una vez que la aplicación está terminada,

se compila o empaqueta de forma tal, que el resultado final es como si se

tratara de una aplicación nativa.

Esto permite casi con un mismo código obtener diferentes

aplicaciones, por ejemplo, para Android y iOS, y distribuirlas en cada una de

sus tiendas. A diferencia de las aplicaciones web, estas permiten acceder,

usando librerías, a las capacidades del teléfono, tal como lo haría una App

nativa.

1.15. ARQUITECTURA DE LA INFORMACIÓN

Según Hernández M. (2016) La arquitectura de información es una

forma de organizar el contenido y funciones de toda la aplicación, de forma

que puedan ser encontrados rápidamente por el usuario. En sentido global,

34

la arquitectura de información considera la relación entre los contenidos de

diferentes pantallas y a nivel particular, la organización de contenidos dentro

de la misma pantalla.

Luego de haber definido el Viaje de usuario y las funciones de la App,

un diagrama de arquitectura utiliza esta información para determinar cuáles

son las pantallas necesarias en cada etapa de ese viaje y qué funciones

debería tener cada una de ellas. Además, aspectos de negocio y requisitos

tecnológicos también pueden tenerse en cuenta para esta definición.

Una de las formas de visualizar la arquitectura consiste en representar

cada pantalla con un rectángulo, en aplicaciones generalmente más

verticales que horizontal, donde las conexiones entre los rectángulos indican

la forma de navegar de una pantalla a otra y a través de qué acción.

35

Gráfico #2 Arquitectura de la información por: Diaz y Matheus (2017

).

Este

diagrama sirve para estudiar la complejidad de la aplicación de un vistazo,

analizar los diferentes niveles de profundidad, visualizar y entender la

relación entre contenidos de una manera más organizada. Además, lo que se

defina en esta etapa tendrá una incidencia directa en el tipo de navegación

que se elija posteriormente.

36

1.16. GRILLA O RETÍCULA DE CONSTRUCCIÓN

Según Cuello J. y Vittone J (2013) La grilla o retícula, grid en inglés, es

la estructura invisible sobre la cual se apoyan todos los elementos visuales.

Su función es la de separar cada uno de los componentes de la interfaz en

un espacio ordenado, organizando los sitios que quedarán en blanco y

aquellos que contendrán formas. Una retícula bien definida se transforma en

una ayuda al diseño que, generando orden y simplicidad, mejora la

usabilidad de la App.

En su forma más básica consta de un módulo base: un cuadrado de

un tamaño determinado que se usa como medida de referencia. A su vez,

este módulo puede dividirse en submúltiplos para espaciados más pequeños.

Mientras el diseño de la interfaz está en desarrollo, la retícula se representa

por medio de líneas guía. Una vez terminada la estructura, se puede percibir

por el llamado “Ritmo visual” que ubica los elementos armónicamente en el

espacio.

En el diseño de interfaces para móviles, la grilla permite establecer

márgenes y determinar la ubicación de los botones, la separación de la

tipografía y el espacio interior y exterior de los contenedores. Por supuesto,

cada uno de los sistemas.

37

1.16.1. GRILLA O RETICULA PARA ANDROID

En Android, el módulo base es de 48dp que equivale

aproximadamente a nueve milímetros, tamaño mínimo recomendado para

elementos interactivos. Basarse en este tamaño y respetar estas

dimensiones para los botones, permite asegurar que estos podrán ser

tocados con el dedo sin problemas, cuestión fundamental en el diseño para

móviles.Para el espaciado y separación, en cambio, se usa un módulo

de 8dp. Por ejemplo, el contenido de filas tiene una separación, superior e

inferior, de 4dp, lo que hace que cuando dos filas están una sobre otra, se

sumen conformando un espacio total de 8dp entre ellas. En los márgenes

laterales, los diseños suelen tener 16dp o, dicho de otra forma, dos módulos

de 8dp juntos.

38

Gráfico #3 Grilla o Retícula para Android por: Diaz y Matheus (2017).

1.16.2. GRILLA O RETICULA PARA IPHONE

Los diseños para iPhone también se basan en una retícula, solo que

en este caso el tamaño del módulo base es de 44px, asegurando que

botones y elementos en listas puedan ser pulsados sin problemas. En ese

ritmo se basan muchas aplicaciones diseñadas para iPhone y es el mismo

que recomienda Apple.

39

Este módulo de 44px se divide en otros de 11px que, repetidos la

cantidad de veces deseada, crean los espacios y separación entre tablas,

botones y otros elementos de la interfaz, generando un ritmo vertical.

Gráfico #4 Grilla o Retícula para IPhone por: Diaz y Matheus (2017).

1.16.3. GRILLA O RETÍCULA PARA WINDOWS

En Windows Phone la retícula se hace más evidente debido al uso

que hace de formas cuadradas en la interfaz. La pantalla principal del

sistema operativo está basada en los llamados azulejos o tiles, que permiten

40

apreciar claramente la distribución y tamaño de los elementos principales. En

este caso, la retícula se apoya en un módulo de 25px con separaciones

de 12px. Esta fórmula, repetida por toda la pantalla, crea una estructura

visual sobre la cual se crean los diseños. Adicionalmente, las filas y

columnas pueden agruparse de distintas maneras para lograr diseños

personalizados que hacen diferentes usos del espacio.

Listas, gráficos, miniaturas de fotos y botones, toman como base esta

retícula, logrando una apariencia estable y dando sensación de orden,

simplicidad y limpieza visual, a través de todas las pantallas de una App de

Windows

Phone.

Figura #1 Grilla o Retícula para Windows Phone por: Diaz y Matheus (2017).

41

1.17. CONCEPTO GRÁFICO

De acuerdo con Corredor (2013), el concepto gráfico trata de encerrar el

mensaje , ese código que hace que el receptor se sienta identificado y genere la

acción por saber más, por comprar, por ir, el go to que todos los clientes buscan.

Por otra parte, según el portal web www.websmultimedia (2012), el concepto

gráfico se compone de la información recogida para sintetizar todos los elementos

que permiten trasmitir la información necesaria y comunicar al público objetivo el

mensaje elegido para una campaña. Gracias al brieffing (también llamado “brief”) se

obtiene una primera visión general de lo que el anunciante desea transmitir,

mediante un informe en el que se muestra toda la información concreta del mensaje.

Las ideas expuestas anteriormente son contradictorias al momento de exponer el

significado sobre el concepto gráfico ya que Corredor hace referencia a que es el

código con que el receptor se identifica y genera la acción, a su vez el portal web lo

define como la información extraída que permite transmitir la información necesaria.

Se puede concluir que el concepto gráfico es el pensamiento referido a cualquier

trabajo expuesto (en el diseño gráfico) que se intenta expresar con imágenes de

dicha idea.

42

1.18. FORMATO

Según el portal web www.blogthinkbig.com (2014) existen varios tipos de

formato para diferentes dispositivos móviles, a su vez resalta el sistema operativo

iOs exclusivo para los teléfonos iPhone de Apple, Android para teléfonos de las

compañías Samsung, LG, Motorola, Nokia, entre otros, Microsoft exclusivo para los

teléfonos con sistema operativo compatible con Windows, estos son los que marcan

tendencia y competencia a los demás sistemas operativos para dispositivos móviles

disponibles en el mercado.

Según L. García (2015) hace referencia a que el formato elegido debe ser

completamente funcional a la temática de la aplicación móvil o sitio web,

haciéndolo de fácil manejo y adaptable a todo tipo de pantallas y contenidos

gráficos (botones, menús, iconos, tipografías, entre otros.)

1.18.1. FORMATO IOS

Lo que caracteriza a iOS frente a otros es que es un sistema operativo cerrado.

Apple no permite que se modifiquen características internas del sistema más allá de

las limitadas opciones que da en los ajustes. Un sistema cerrado permite, sin

embargo, ofrecer siempre una experiencia más estable y segura tal y como diseñó el

fabricante en un principio. Sin embargo a muchos usuarios, que buscan una mayor

43

personalización, se les pueden quedar cortas las opciones que le da Apple. Por otro

lado, como también suele ser habitual en los productos de la empresa, no se licencia

a terceros por lo que tan solo los iPhone disponen de este sistema operativo.

Figura#2 Sistema Operativo iOs para iPhone por: Díaz y Matheus (2017).

1.18.2. FORMATO ANDROID

El sistema operativo número uno en cuanto a popularidad. Con una cuota de

mercado cercana al 85% el sistema operativo de Google se caracteriza por ser abierto

y disponible para cualquier fabricante interesando en utilizarlo para sus dispositivos

móviles.

Esta disponibilidad ha creado sin embargo una gran fragmentación, pudiéndose

encontrar innumerables dispositivos de miles de formas y funcionalidades con todas

44

las versiones de Android existentes. Además la posibilidad de que cada fabricante

incluya su propia capa sobre el original, propicia que la experiencia de usuario no sea

siempre la deseada por Google y las actualizaciones tarden en llegar.

Figura #3 Sistema Operativo Android por: Díaz y Matheus (2017).

1.18.3. FORMATO WINDOWS

Con un diseño radicalmente distinto a las dos opciones ya comentadas,

Windows Phone destaca por su pantalla de inicio personalizable que ofrece las

notificaciones de las App de una manera sencilla y limpia. Además ofrece una

45

experiencia de usuario muy buena independientemente del tipo y gama de terminal

en que se esté usando.

Aunque con menos App disponibles que en Android y iOS, Windows Phone 8.1,

cuenta ya con más de 300.000 App en su tienda, además de ofrecer aplicaciones

propias de la compañía como Skype, OneDrive o Xbox Live.

Figura #4 Sistema operativo para Windows Phone por: Díaz y Matheus (2017).

1.18.4. FIREFOX OS

46

Un sistema operativo basado en HTML5 con núcleo Linux, de código abierto.

Desarrollado por Mozilla Corporatión con apoyo de empresas como Telefónica. El

sistema operativo está basado en Linux y usa la tecnología de Mozilla, Gecko. Se

basa en estándares abiertos como por ejemplo HML5, CSS3 y JavaScript.

Entre las interesantes características de este sistema operativo abierto están las

aplicaciones web y pueden ser de dos tipos diferentes: aplicaciones de servidor o

empaquetadas. A diferencia de los SO ya comentados, en este caso, las App de

servidor, corren vía web, es decir son páginas webs con la apariencia de aplicaciones

y sin conexión a internet no es posible acceder a estas. Las aplicaciones

empaquetadas necesitan la descarga de un paquete comprimido y se cargan desde

la fuente local cada vez que se accede a la aplicación.

Figura#5 Sistema operativo Firefox OS por: Díaz y Matheus (2017).

47

1.18.5. BLACKBERRY

BlackBerry anteriormente conocida como RIM no está pasando por sus mejores

momentos. Acostumbrado a ofrecer terminales con teclado físico, el paso a las

pantallas táctiles se le atragantó. Sin embargo, los esfuerzos realizados por la

compañía canadiense para recuperar el terreno perdido han sido grandes y en el año

2012 lanzaron su órdago con un renovado sistema operativo el BlackBerry. Aun así,

los últimos estudios sobre cuota de mercado lo dejan en tan solo un 0,5% mundial.

BlackBerry 10 tiene una interfaz más fluida, un teclado inteligente y táctil más

depurado y otra serie de opciones que lo acercan a las de la competencia. Al igual

que con iOS, el SO es software propietario y solamente los teléfonos de la compañía

llevan su sistema instalado.

Figura#6 Sistema operativo BlackBerry 10 por: Díaz y Matheus (2017).

48

1.18.6. UBUNTU TOUCH

Otro sistema operativo basado en Linux pero en esta ocasión bajo la famosa

firma Ubuntu. Presentado en el 2013, se trata de un proyecto de Canonical. En la

actualidad varias empresas están desarrollando terminales para este sistema

operativo, entre ellas la española Bq.

Ubuntu Touch utiliza las mismas tecnologías de la versión de escritorio, por lo

que ambas comparten App sin problemas de compatibilidad. Dispone también de

algunas de las aplicaciones más populares como Facebook y YouTube.

Figura#7 Sistema operativo Ubuntu Touch por: Díaz y Matheus (2017).

49

1.18.7. TIZEN

Sistema operativo móvil, también basado en Linux, patrocinado por Linux

Fundation y Fundación LiMo. Se ha desarrollado a partir de la plataforma Linux de

Samsung. Aunque en un principio fue presentado como un SO de código abierto,

Tizen 2 funciona con un sistema de licencias no abiertas. El SDK completo fue

publicado bajo licencia de Samsung de código no abierto.

Aunque pueda parecer que Tizen forma parte de la estrategia de Samsung a largo

plazo, su apuesta errática por este sistema operativo hace que no se sepa muy bien

qué pasará con él. De momento algunos de sus dispositivos ya lo incorporan como el

caso del famoso smartwatch Samsung Gear S.

Figura#8 Sistema operativo Tizen del smartwatch Samsung Gean S por Díaz y Matheus (2017).

50

1.18.8. WEBOS

Este interesante sistema operativo, fue a Palm lo que BlackBerry 10 a RIM. Sin

embargo, pese a las buenas críticas que cosechó este sistema operativo, no consiguió

salvar la compañía. Tras la compra por parte de HP de la compañía Palm Inc., en la

actualidad web OS es propiedad de LG que lo utiliza como sistema operativo para sus

televisores inteligentes.

Figura#9 Sistema operativo Web Os para TV inteligentes de LG por: Díaz y Matheus (2017).

51

1.19. COSTOS

Según el portal web www.consumidor.ftc.gov (2011) algunas aplicaciones

son distribuidas gratuitamente por tiendas de aplicaciones. Los creadores de

estas aplicaciones pueden ganar dinero de las siguientes maneras:

Algunos proveedores venden un espacio publicitario dentro de la

aplicación. Los creadores de estas aplicaciones pueden ganar dinero con

los anuncios, por este motivo distribuyen la aplicación gratuitamente para

poder llegar a la mayor cantidad posible de usuarios.

Algunas aplicaciones ofrecen versiones básicas gratuitas. Quienes

desarrollan estas aplicaciones esperan que le agrade suficientemente la

aplicación para pasarse a una versión mejorada y con una mayor cantidad de

funciones por la que tendrá que pagar un cargo.

Algunas aplicaciones le permiten comprar más funciones de la misma

aplicación (“in-App purchases” en inglés). Usualmente, las compras de esas

funciones adicionales se facturan a través de la tienda de aplicaciones. Hay

varios aparatos que vienen con configuraciones que permiten bloquear estas

compras.

52

Algunas aplicaciones se ofrecen gratuitamente para despertar su interés

en otros productos de la compañía. Estas aplicaciones son una forma de

publicidad.

1.20. TIPOGRAFÍA

Según Cuello J. y Vittone J (2013) la tipografía tiene como objetivo

conseguir que el texto se lea con claridad. Esto se logra no solo con una

adecuada elección de la fuente, sino también gestionando su tamaño,

separación entre líneas, ancho de columnas y contraste visual con el fondo.

Este último punto, el contraste, es más importante de lo que puede

creerse a simple vista. Un móvil es un dispositivo que muchas veces se

usará fuera de casa, por ejemplo, en la calle. En algunos momentos el sol

dará directamente sobre la pantalla y si no hay un buen contraste entre

tipografía y fondo, la información en pantalla será imposible de leer. La

tipografía es un componente que, como botones y gráficos, también se

asienta en una retícula que definirá su ubicación y posición dentro del

contexto general de la pantalla.

Se observa también que Mocholí A. (2016) expresa que la tipografía

en el diseño de una App móvil es uno de los elementos que más ha variado

53

con el paso del tiempo. Ha pasado de ser un elemento olvidado a ser un

paso más en el proceso de diseño de una aplicación móvil. Elegir una buena

tipografía supondrá que el usuario leerá más cómodamente nuestra App.

Especialmente si nuestra aplicación contiene mucho texto.

Las ideas expuestas anteriormente hablan con claridad sobre la

importancia que tiene la tipografía al momento de crear una App móvil, no

solo se trata de elegir la fuente más cómoda para el usuario sino también de

la legibilidad, del contraste entre el color de los caracteres y el fondo, el

tamaño que se piensa utilizar, si los bloques de texto son extensos o

sencillos, los espacios en blanco, si la letra es serif o san serif y en tal caso,

en que situación debe usarse una o la otra.

1.21. COLOR

Según Cuello J. y Vittone J (2013) El color es un recurso vital en el diseño

de una aplicación. Su uso abarca encabezados, textos, botones, fondos y

muchos otros elementos que conforman la interfaz. En algunas ocasiones,

está asociado a la identidad, color corporativo, y en otras, responde a

criterios estéticos y decisiones de diseño.

Un color por sí solo, salvo en el caso de colores reservados, no indica

mucho. Como parte de un sistema cromático, el uso consistente, consciente

54

y vinculado al contexto donde se aplica, es lo que lo llena de significado para

el usuario. Si bien es cierto Hernández H. (2015) describe el color como la

herramientas más poderosa del diseñador a la hora de diseñar una App.

Se puede utilizar el color para influenciar sobre las emociones del usuario,

fortalecer la marca, conseguir ventas y guiar a los usuarios a acciones

concretas dentro de la App. Las evidencias anteriores constatan que las

relaciones de color se basan en la rueda de color o círculo cromático, done

debe tomarse en cuenta que las asociaciones de color varían de una cultura

a otra, e incluso, de persona a persona. Los hombres y las mujeres a

menudo tienen diferentes preferencias de color y este es un punto importante

y significativo al momento de crear una aplicación móvil.

1.21.1. COLORES RESERVADOS

Según Cuello J. y Vittone J (2013) Hay ciertos colores que deben

emplearse de forma cuidadosa porque tienen connotaciones que no pueden

obviarse. Se llaman justamente “colores reservados” porque su uso debería

limitarse especialmente a los nombrados a continuación:

55

Gráfico #5 Colores reservados por: Diaz y Matheus (2017).

a) Rojo: Para errores y alertas importantes. Es un color que

naturalmente indica peligro y llama la atención para centrarse

inmediatamente en lo que está ocurriendo.

b) Amarillo: Prevención. Señala que la acción que va a realizarse

implica la toma de una decisión que ocasiona alguna

consecuencia, por lo cual hay que estar alerta.

c) Verde: Mensajes de éxito y confirmación de que una acción se ha

realizado correctamente.

1.22. ICONOS

Según Cuello J. y Vittone J (2013) los iconos al momento de diseñar y

crear una aplicación web pueden dividirse en dos: icono de lanzamiento e

iconos interiores.

1.22.1. ICONO DE LANZAMIENTO

56

En primer lugar, este ícono servirá para representar a la App en las

diferentes tiendas de aplicaciones, junto a las pantallas y textos

promocionales, como elemento de venta para convencer al usuario de

descargarla. Sorteado este paso, y una vez instalada en el teléfono, la

aplicación convivirá con muchas otras que el usuario haya instalado; por eso,

el ícono de lanzamiento debe ser distintivo y representativo de la App.

Distintivo, porque tiene que separarla de las demás, incluso de aquellas que

cumplan funciones similares, y representativo, porque sus características

visuales tienen que comunicar claramente el objetivo principal de la

aplicación. Las formas simples, no muy cargadas y cuidadas en sus detalles,

suelen ser las que tienen mayor efectividad.

1.22.2. ICONOS INTERIORES

Ya dentro de la aplicación, los íconos interiores tienen un papel menos

estelar y más funcional que los de lanzamiento. Puede ser que pasen

desapercibidos, pero su trabajo es importante y silencioso y, como tal, digno

de tener en cuenta.

Su uso suele estar asociado a tres escenarios. El primero, como

ayuda visual para reforzar información, por ejemplo, en un cuadro de diálogo

con una alerta. En el segundo caso, los íconos interiores actúan como

57

complemento de elementos interactivos, como cuando se encuentran dentro

de botones o pestañas. Finalmente, su función puede ser la de mejorar la

utilización del espacio, en este caso, el ícono resume visualmente algo que

en forma de texto sería muy extenso o complejo de entender.

Los íconos tienen que transmitir por sí solos la acción que ejecutan y

esto depende del contexto. Por ejemplo, un ícono de «eliminar» puede

referirse a un solo elemento en particular o a varios, dependiendo de dónde

esté ubicado y a qué elemento de la interfaz esté visualmente asociado.

Grafico #6 Iconos internos utilizados por Android, iOs y Windows por: Diaz y Matheus (2017).

1.23. BOTONES

Según el portal web http://www.internetlab.es (21013) los botones son

los elementos más significativos dentro de las interfaces y que hay que tener

58

muy en cuenta a la hora del diseño web. Casi todas las comunicaciones

importantes entre el ser humano y el ordenador se inician, verifican o

ejecutan a través de un botón. Se utilizan los botones cuando se responde a

los cuadros de diálogos, al mandar mensajes, y al moverse por la web. Para

la mayoría de la gente, los botones son el medio primario de interacción con

los ordenadores.

Como complemento Moreno L. (2005) Los botones gráficos son

elementos exclusivos de las aplicaciones informáticas, en las que tienen

básicamente la misión de capturar eventos realizados por el usuario para

lanzar acciones de respuesta adecuadas. Es común ver en las páginas web

botones que permiten al usuario interactuar con la aplicación, informándole

de la acción que se va a producir si pincha sobre ellos. Funcionan de esta

forma como iconos ampliados, que permiten ejercer las mismas

funcionalidades que estos elementos pero sin estar tan limitados en aspectos

como formas, tamaños, colores, entre otros.

Las ideas expuestas sobre el botón y su aplicación en el diseño web y

móvil hacen que el usuario a interactúe más con la página, ya que estos le

otorgan al sitio funcionalidad y solución estética a diferentes situaciones que

se presentan como al momento de tener un cuadro de dialogo o un

formulario.

59

1.24. TAMAÑO DE PANTALLA

Según Cuello J. y Vittone J (2013) Un factor determinante en las

pantallas de los dispositivos móviles es su tamaño: la distancia, medida en

pulgadas, de un extremo a otro en forma diagonal. En este sentido, Android

se trata de un sistema operativo muy fragmentado debido a la gran cantidad

de modelos que ofrecen los fabricantes, con pantallas que varían de un

teléfono a otro sin mayor coherencia; esta es una de las consecuencias de

ser un sistema operativo abierto y disponible en muchos terminales. Ahora

bien, para poner un poco de orden en este caos, Android ha decidido agrupar

los distintos tamaños de pantalla en cuatro categorías principales: pequeña,

normal, grande y extra grande.

En el mundo iOS las cosas están más o menos en orden: iPads, iPads

mini e iPhone, tienen especificaciones de pantalla sin sobresaltos, ya que

todos se encuentran bajo el control de Apple, único fabricante de los

terminales que llevan este sistema operativo. Hasta la fecha no existen

muchos fabricantes que provean Windows Phone y los tamaños de pantalla

se limitan a tres tipos, cambiando ligeramente la relación de aspecto entre

ellos: WVGA (15:9), WXGA (15:9) y 720p (16:9).

60

Según el portal web https://hayasmarketing.es (2015) habla sobre el

que el tamaño de pantalla es el primer paso que se debe tomar en cuenta

para diseñar una App y por los diferentes sistemas operativos, debe

diseñarse para iOs, Android y Windows phone por separado; ya que las

pantallas y resoluciones de los dispositivos son distintas. Para empezar a

diseñar una App móvil debe escogerse iOS, ya que tiene menos tipos de

resoluciones de pantallas (3) que Android (5).

1.24.1. TAMAÑO DE PANTALLA PARA IOS

a) iPhone 4: 320 x 480 – 1x

b) iPhone 5: 640 x 1136 – 2x

c) iPhone 6: 1334 x 750 – 3x

1.24.2. TAMAÑO DE PANTALLA PARA ANDROID

a) mdpi – 1x – small

b) hdpi – 1.5x – normal

c) xhdpi – 2x – large

d) xxhdpi – 3x – extra large

e) xxxhdpi – 4x – extra extra large

61

Cabe considerar que a pesar de que los dos autores expresan que

hay muchos tamaños de pantallas, en su mayoría en el sistema operativo

Android, la resolución también es un ítem que hay que tomar en cuenta al

momento de diseñar dichos prototipos ya que no en todos los dispositivos

móviles es igual y se requiere que el usuario obtenga la mejor experiencia

posible.

1.25. DENSIDAD DE PANTALLA

Según Cuello J. y Vittone J. (2013) Esta se refiere a la cantidad de

píxeles que entran en un determinado espacio físico y se mide en puntos por

pulgada, DPI por sus siglas en inglés, donde un punto equivale a un píxel.

Para entender un poco mejor, la densidad de pantalla puede compararse con

la densidad de población de un país, aquella que relaciona la cantidad de

habitantes por kilómetro cuadrado; en el caso de las Apps, los habitantes

serían los píxeles y la superficie, la pantalla. Una mayor densidad de pantalla

indica mayor cantidad de píxeles disponibles y, por lo tanto, mejor calidad de

definición de imágenes y otros elementos que componen la interfaz.

62

La densidad influye en el trabajo del diseñador porque determina las

características del documento con el que se empezará a diseñar y la

cantidad de imágenes que se deberán producir al terminar el diseño: a mayor

cantidad de densidades soportadas por un sistema operativo, mayor será el

número de imágenes que harán falta.

Grafico #7 Densidad de pantalla por: Diaz y Matheus (2017).

En Android hay cantidad de densidades que cubren los móviles y

tabletas, ofreciendo un amplio abanico de calidades de visualización. Se

encuentran agrupadas en baja, media, alta o extra alta.

iOS solo cuenta con dos densidades: retina y no retina. La primera es

más actual y ha comenzado a utilizarse para casi todos los dispositivos

recientes, a excepción de iPad mini. Sus características visuales duplican la

cantidad de píxeles o puntos por pulgada que se encuentran en los

dispositivos que no cuentan con esta tecnología.

63

Por último, Windows Phone separa las densidades en media, alta y

HD, dependiendo del terminal.

1.26. IMAGEN

Según Porto J. y Merino M. (2014) una imagen digital es aquella

representación bidimensional construida a partir de una matriz

binaria (compuesta de unos y ceros). Es posible obtener estas imágenes de

distintas maneras. A la hora de conseguir una buena imagen digital es

fundamental cuidar aspectos tales como la profundidad del color, la

resolución tanto de entrada como de salida, el tamaño, los niveles de gris, el

formato (jpeg, png, gif, …), la textura o el modo del color, sin olvidarse, por

supuesto, de la saturación o del brillo.

Expresa por otra parte el portal web http://www.fotonostra.com (2017) que

La imagen digital está formada por una serie de matrices numéricas de ceros

y unos que se almacenan en una memoria informática y que definen las

características de una fotografía. Las imágenes digitales pueden ser icónicas

(de diferentes grados de figuración y realismo) o aicónicas (abstractas,

esquemáticas), tridimensionales y planas, fijas o móviles.

64

En esta sección se explica la formación de la imagen digital, qué es la

resolución digital, los píxeles, los bits, entre otros.

1.27. NAVEGACIÓN

Según Cuello J. y Vittone J. (2013) Una navegación simple y consistente es un

componente esencial en la experiencia de uso de la App y surge de contestar algunas

preguntas básicas como: ¿De qué manera el usuario recorrerá la aplicación? ¿A

través de menús o del contenido en sí mismo? ¿Y si viene de una notificación? ¿Cómo

hará para volver atrás cuando haya avanzado?

Según la plataforma web www.qode.pro (2015) la navegación en las App

móviles se hace imprescindible así como su interfaz de usuario, estas se adaptan a

todos estos dispositivos, permitiendo seguir el ritmo frenético de actualización de

estos terminales. Independientemente del tamaño de la pantalla, la resolución o los

píxeles lo que se busca con esta adaptación es conseguir un correcto y fluido

funcionamiento de la aplicación y con ello una buena experiencia de

usuario, fundamentado en un estudiado diseño de App.

65

1.27.1. PESTAÑAS

Las pestañas, o tabs, se pueden utilizar para filtrar contenidos o cambiar entre

pantallas que, de acuerdo a la arquitectura de información, tienen el mismo nivel de

jerarquía, indicando siempre dónde se está y hacia dónde más se puede ir. Las

buenas prácticas indican que es necesario destacar siempre la pestaña seleccionada,

mantener el orden y la ubicación inicial, que no cambien de pantalla en pantalla, y no

usarlas para incluir otras acciones distintas a la navegación.

Figura#10 Las pestañas se ubican arriba en Android y Windows Phone y en iOS, abajo por: Díaz y

Matheus (2017).

1.27.2. LISTAS

66

Las listas pueden mostrar tanto textos como imágenes, pero es importante

siempre jerarquizar su contenido. Por ejemplo, en una aplicación de correo

electrónico es habitual darle mayor importancia al nombre del remitente que al

asunto del correo, la fecha de recepción o las primeras palabras del mensaje.

Ordenar los elementos dentro de una lista ayuda a visualizar el nombre del

remitente, en este caso el dato más importante, de un primer vistazo.

Cuando contiene muchos elementos puede añadirse un sistema de índice que

complemente la navegación a medida que se va desplazando, de forma vertical, por

el contenido de la lista.

67

Figura#11 Uso de listas en Android, iOS y Windows Phone. Por: Díaz y Matheus

(2017).

1.27.3. GALERÍAS DE IMÁGENES

La disposición de imágenes está regida por la retícula propuesta por cada sistema

operativo. En caso de que excedan el área disponible, se realiza un recorte,

generalmente cuadrado, de las imágenes a mostrar.

68

Figura#12 Las galerías de imágenes usan un formato reticular en Android, iOS y Windows Phone por:

Díaz y Matheus (2017).

1.27.4. MENÚ TIPO CAJÓN

Este patrón, popularizado por Facebook, permite cambiar rápidamente entre

pantallas de la aplicación. Pulsando un botón se despliega de forma lateral una lista

con los contenidos, oculta hasta ese momento. Otra forma de llegar a esta lista es

deslizando el dedo desde el lado izquierdo de la pantalla.

Las ventajas del uso de este patrón están claras: mejor aprovechamiento del

espacio y, una vez desplegada la lista, ofrece una forma cómoda de navegar los

69

contenidos. Pero no todas son buenas noticias, ya que este tipo de menú obliga a los

usuarios a tocar el botón y desplegar el panel para poder saber cuáles son las

opciones disponibles en la lista.

Figura#13 El menú tipo cajón se ha hecho muy popular en Android, iOS y Windows Phone, aunque

por ahora solo el primero lo incorpora en sus guías oficiales por: Díaz y Matheus (2017).

1.27.5. VOLVER

A medida que se va avanzando en profundidad de contenidos es necesario

contar con una forma de retroceder o volver a niveles superiores. En el mundo móvil,

con la navegación pantalla a pantalla, el uso del botón «volver» es muy frecuente.

70

Figura#14 El botón de volver en Android se usa arriba, entonces llamado up, y abajo; en iOS, siempre

arriba y en Windows Phone, es el botón físico del terminal por: Díaz y Matheus (2017).

1.28. TELEFÉRICO

Según el portal web http://lexicoon.org (2017) El teleférico es un sistema de

transporte aéreo constituido por cabinas colgadas de una serie de cables que se

encargan de hacer avanzar a las unidades a través de las estaciones. Cuando las

cabinas van por tierra se denomina funicular.

Se observa también que según Orro A., Novales M. y Rodríguez M (2003)

los teleféricos son un medio de transporte en movimiento unidireccional

dotado de vehículos que se desplazan y/o son movidos en suspensión por

71

uno o más cables, esta categoría incluye igualmente telecabinas y los

telesillas.

1.29. CORDILLERA DE LOS ANDES

Según el portal web www.venemia.com (2014) El otro ramal de los Andes

que penetra en Venezuela y continúa hacia el noreste, después de la

Depresión del Táchira, es la Cordillera de Mérida la cual se extiende hasta la

Depresión de Barquisimeto y Carora. Este macizo montañoso se caracteriza

por sierras de altos y escarpados picos donde se observan restos de

antiguas glaciaciones, profundos valles formados por grandes fallas que

dividen a los Andes en bloques y las características terrazas escalonadas.

El Parque Nacional Tama es la entrada de los Andes en Venezuela, desde

una altura mediana de 2.000 mts. Disminuye aún más en la Depresión del

Táchira, donde existe una población laboriosa dedicada al trabajo de la

tierra, característica común de toda la Cordillera de Mérida. Esta región de

gran riqueza agrícola y minera también posee sitios de gran interés turístico y

bellos paisajes de fértiles valles. Prácticamente todas las cumbres de esta

cordillera son parques nacionales que se inician con el Chorro del Indio a las

puertas de San Cristóbal, ascendiendo violentamente hacia el Páramo de

Batallón (4.000 mts.) de donde nacen todos los ríos importantes de la zona.

72

El fecundo y hermoso valle del Río Mocotíes, donde se encuentra la

población de Bailadores, está custodiado por la Sierra de Tovar al oeste y la

cadena de páramos de La Negra al este con cimas redondeadas a 3.000

mts. De la misma forma canalizando el Río Chama, la sierra incluida en

Parque Nacional La Culata al oeste y la de Sto. Domingo al este, es la cuna

de ricos valles agrícolas y numerosos sitios de interés turístico. De la propia

ciudad de Mérida, ciudad de los caballeros, parte el teleférico más largo y

alto del mundo (12,5 km. y 4.765 mts.), hacia el Pico Espejo en la Sierra

Nevada de Santo Domingo.

Las crestas escarpadas de esta sierra están casi todas por encima de los

4.000 mts., todos ellos cubiertos por nieves perpetuas. Toda esta sierra

hasta el inicio de las planicies de los llanos es el P. N. Sierra Nevada; con su

inagotable riqueza natural que alcanza niveles insospechados en cada uno

de sus rincones: en las altas cumbres, los tormentosos ríos y tranquilas

lagunas; en la sucesión vegetal de sus ecosistemas que abarca desde las

selvas pluviales en las faldas de la montaña, las selvas nubladas en

diferentes niveles de composición, la vegetación de páramo con múltiples

especies del frailejón andino, hasta las grandes alturas donde no subsisten

las plantas y las nieves son perpetuas.

Continuando la Cordillera de Mérida en dirección noreste por la Sierra de

Trujillo, la mayor altura se encuentra en la Teta de Niquitao (4.006 mts.),

dentro del P. N. Guaramacal. La cordillera continúa perdiendo altitud y

73

dispersándose en pequeñas sierras hasta la Depresión de Barquisimeto y

Carora.

1.30. PICO ESPEJO

Según el portal web http://www.merida24.com (2015) el pico espejo es un

accidente geográfico ubicado en la Sierra Nevada de la Cordillera Andina,

próximo al Pico Bolívar en Venezuela. Posee una elevación de 4.765 msnm y

en su Cuma se ubica la quinta y última estación de sistema teleférico de

Mérida lo cual hace la montaña más accesible de los grandes picos de la

Sierra Nevada de Mérida.

1.31. TELEFÉRICO DE MÉRIDA

La idea para la construcción de un teleférico en Mérida fue propuesta en

1952 por andinistas merideños, como alternativa frente al proyecto del

gobierno nacional de hacer una carretera que atravesaría toda la sierra. Las

obras estuvieron a cargo de dos empresas europeas, una francesa y la otra

suiza. El levantamiento topográfico se realizó en 1955. En abril de 1957 se

comenzó con el armado de un teleférico de carga que sirviese de apoyo para

el levantamiento del teleférico de pasajeros, para ello se hizo

necesario abrir picas y senderos en la montaña y el acarreo de todos los

materiales a hombros de campesinos y a lomo de mula.

74

1.32. SISTEMA TELEFÉRICO MUKUMBARÍ

Según el portal web http://www.mintur.gob.ve (2016) Mukumbarí significa

en voz indígena “lugar donde duerme el sol”. Esta denominación la daban los

primeros habitantes a lo que hoy se conoce como la imponente Sierra

Nevada.

El nuevo Sistema Teleférico de Mérida, Mukumbarí, es un ascensor de

lujo que da entrada a las más bellas montañas venezolanas. Paisaje único

en el mundo, ya que posee seis unidades ecológicas que van desde los

1.577 metros sobre el nivel del mar (msnm) hasta los 4.765 msnm en un

recorrido de 12,5 kilómetros

Calificado como el más moderno del planeta, esta obra de

infraestructura posee cinco estaciones: Barinitas (1.577 msnm), La Montaña

(2.436 msnm), La Aguada (3.452 msnm), Loma Redonda (4.045 msnm) y

Pico Espejo (4.765 msnm), conectadas por cuatro tramos que cuentan con

tecnología de punta, convirtiéndolo además en el teleférico más seguro y

confiable.

1.33. ESTACIÓN BARINITAS

75

Barinitas es la puerta de entrada al Mukumbarí, arquitectónicamente, la

nueva estación que cuenta con 6.357 metros cuadrados de construcción,

llama la atención por la gran cubierta ondulada que unifica todas las

edificaciones y plazas que la conforman, con espacio en la periferia de esta

cubierta para el imponente grupo de árboles existentes que la

complementan.

Dentro de esta estación se encuentran las casillas para la venta de

boletos, organización y acceso a las cabinas; así como los servicios de

locales comerciales de artesanía y souvenirs, parque infantil, feria de

comidas, sanitarios públicos, enfermería, parada de autobuses y vestuarios

para empleados y bomberos, además se están incorporando locales

comerciales y una feria gastronómica.

La primera estación podrá albergar a más de 800 personas

simultáneamente en una infraestructura de tónica moderna y minimalista con

colores neutros, lo que hace de Barinitas un espacio dinámico.

2. BASES LEGALES

76

Para el diseño de un producto o digital, se deben tomar en cuenta ciertas

bases legales que es encuentran estipulados tanto en la Ley de derecho de

autor como en la Ley de propiedad intelectual, que protegen la identidad del

producto y del diseñador, además de que le dan sentido de pertenencia al

autor.

A. LEY DE DERECHO DE AUTOR (Gaceta Oficial N° 4.638, 1 de Octubre

de 1993) Del capítulo I, de los derechos protegidos, en la sección

primera, de las obres de ingenio:

a) Artículo 1°.- Las disposiciones de esta Ley protegen los derechos de los

autores sobre las obras del ingenio de carácter creador, ya sea de índole

literaria, científica o artística, cualquiera sea su género, forma de

expresión, mérito o destino.

Los derechos reconocidos en esta Ley son independientes de la

propiedad del objeto material en el cual esté incorporada la obra y no están

sometidos al cumplimiento de ninguna formalidad.

Quedan también protegidos los derechos conexos a que se refiere el

Título IV de esta Ley.

b) Artículo 2°.- Se consideran comprendidas entre las obras del ingenio a

que se refiere el artículo anterior, especialmente las siguientes: los libros,

folletos y otros escritos literarios, artísticos y científicos, incluidos los

77

programas de computación, así como su documentación técnica y

manuales de uso; las conferencias, alocuciones, sermones y otras obras

de la misma naturaleza; las obras dramáticas o dramático-musicales, las

obras coreográficas y pantomímicas cuyo movimiento escénico se haya

fijado por escrito o en otra forma; las composiciones musicales con o sin

palabras; las obras cinematográficas y demás obras audiovisuales

expresadas por cualquier procedimiento; las obras de dibujo, pintura,

arquitectura, grabado o litografía; las obras de arte aplicado, que no sean

meros modelos y dibujos industriales y cartas geográficas; los planos,

obras plásticas y croquis relativos a la geografía, a la topografía, a la

arquitectura o a las ciencias; y, en fin, toda producción literaria, científica

o artística susceptible de ser divulgada o publicada por cualquier medio o

procedimiento.

c) Artículo 6°.- Se considera creada la obra, independientemente de su

divulgación o publicación, por el solo hecho de la realización del

pensamiento del autor, aunque la obra sea inconclusa. La obra se estima

divulgada cuando se ha hecho accesible al público por cualquier medio o

procedimiento. Se entiende por obra publicada la que ha sido reproducida

en forma material y puesta a disposición del público en un número de

ejemplares suficientes para que se tome conocimiento de ella.

d) Artículo 12.- Se entiende por obra audiovisual toda creación expresada

mediante una serie de imágenes asociadas, con o sin sonorización

incorporada, que este destinada esencialmente a ser mostrada a través

78

de aparatos de proyección o cualquier otro medio de comunicación de la

imagen y del sonido, con independencia de la naturaleza o características

del soporte material que la contenga.

La calidad de autor de una obra audiovisual corresponde a la persona o

las personas físicas que realizan su creación intelectual.

Salvo prueba en contrario se presume coautores de la obra audiovisual,

hecha en colaboración:

1. El director o realizador.

2. El autor del argumento o de la adaptación.

3. El autor del guión o los diálogos.

4. El autor de la música especialmente compuesta para la obra.

e) Artículo 17.- Se entiende por programa de computación a la expresión en

cualquier modo, lenguaje, notación o código, de un conjunto de

instrucciones cuyo propósito es que un computador lleve a cabo una

tarea o una función determinada, cualquiera que sea su forma de

expresarse o el soporte material en que se haya realizado la fijación.

El productor del programa de computación es la persona natural o jurídica

que toma la iniciativa y la responsabilidad de la realización de la obra.

79

B. LEY DE PROPIEDAD INTELECTUAL. (Gaceta Oficial N° 5.481, 13 de

Octubre de 1997).

a) ARTÍCULO 11: Hecho Generador: Es correspondiente del autor la

propiedad intelectual de una obra literaria, científica o artística por el

solo hecho de su creación.

b) ARTICULO 2°: Contenido: La propiedad intelectual está compuesta

por los derechos de carácter personal y patrimonial, los cuales

atribuyen al autor a plena disposición y el derecho exclusivo a la

explotación de la obra sin limitación alguna.

80

3. CASOS DE ESTUDIO

A continuación, se manifiestan cinco casos de estudios de diferentes

diseños de aplicaciones móviles, los casos que se escogieron se estudiaron

para luego así determinar que eran los correctos para tomarlos como

referencia que sirvan de soporte para el desarrollo del producto final del

presente proyecto de investigación. Los casos seleccionados tratan sobre

aplicaciones móviles que hacen referencia al transporte público en la ciudad

o sobre el turismo en Venezuela, cada uno de estos casos se seleccionó con

un propósito, ya que se tomaran las funciones principales de cada uno para

ser fusionadas y estudiadas para ver si resultan factibles para la realización

del producto final o si uniendo unas con otras, sirve de soporte para la

realización satisfactoria del mismo.

En cuanto a los aspectos que se observan claves para ser evaluados se

consideran todos aquellos que definen una App móvil como tal, tanto en la

parte que corresponde en el desarrollo de la misma como en la parte gráfica.

Se obtienen los siguientes factores a evaluar: Formato de soporte, tipografía

elegida, retícula preestablecida, colores seleccionados, tipos de icono, tipo

de conexión, tamaño total de la App (MB), costo de la descarga y funciones

principales de la misma. Se muestran referencias gráficas sobre el

identificador de lanzamiento de la App, del menú principal y un ejemplo de la

estructura de la misma.

81

Se trabajó con cinco casos de estudios por separado, para luego ser

comparados en un cuadro general que se muestran a continuación.

82

CUADRO 1

Caso de Estudio #1 por: Diaz y Matheus (2017).

83

CUADRO 2

Caso de Estudio #2 por: Diaz y Matheus (2017).

84

CUADRO 3

Caso de Estudio #3 por: Diaz y Matheus (2017).

85

CUADRO 4

86

Caso de Estudio #4 por: Diaz y Matheus (2017).

CUADRO 5

87

Caso de Estudio #5 por: Diaz y Matheus (2017)

88

Cuadro #7 Cuadro comparativo de los casos de estudio por Díaz y Matheus (2017)

89

4. MÉTODO DE DISEÑO

Según Peredo (2014) para el método de diseño debes tener en cuenta que se

refiere a los pasos de seguir o la forma de proceder en un proyecto determinado.

De manera que para realizar actividades de diseño es necesario seguir algunos

pasos que ayudarán a conseguir buenos resultados: aumentar las ventas, lograr

una buena comunicación, convencer a los usuarios de algo en específico, entre

otros.

Por tanto se deduce que para todo de proyecto de investigación es necesario

realizar ciertos procesos metodológicos mediante pasos esquematizados bajo un

régimen establecido, para llegar a la solución de forma satisfactoria.

4.1. MÉTODO DE DISEÑO SEGÚN MUNARI (2006)

Su finalidad es la de conseguir un máximo resultado con el mínimo esfuerzo,

en el campo del diseño tampoco es correcto diseñar sin método, pensar de forma

artística buscando en seguida una idea sin hacer previamente un estudio para

documentarse sobre lo ya realizado en el campo de lo que hay que proyectar, sin

saber con qué materiales construir una cosa, sin precisar bien su exacta función.

90

Gráfico#8 Método de estudio 1 por Diaz y Matheus (2017).

91

4.2. MÉTODO DE DISEÑO SEGÚN PAPANEK (1999)

El proceso de diseño, ha de reunir tres pasos: descripción de la necesidad

para resolver un problema, aspecto del comportamiento de resolver problemas

(llamado creativo), y sugerencias de algunos métodos que permitan la resolución

de los problemas.

Gráfico#9 Método de Estudio 2 por Díaz y Matheus (2017).

92

4.3. MÉTODO DE ESTUDIO SEGÚN JONES

Inicia con los conceptos de caja negra y caja transparente. En el primer caso

se considera que el diseñador es capaz de producir resultados en los que confía y

que a menudo tiene éxito, mas no es capaz de explicar cómo llegó ahí. Sus

características son:

a) El diseño final está conformado por experiencias anteriores.

b) Su producción se ve acelerada mediante el relajamiento de las inhibiciones a la

creatividad.

c) La capacidad de producir resultados depende de la disponibilidad de tiempo.

d) Repentinamente se percibe una nueva manera de estructurar el problema.

e) Control consciente de las maneras en que se estructura el problema.

Las características de la caja transparente son:

a) Objetivos, variables y criterios fijados de antemano.

b) Análisis del problema completado antes de iniciar las soluciones.

c) La evaluación es verbal y lógica.

d) Las estrategias se establecen antes.

e) Las estrategias son lineales y con retroalimentación.

Ambos métodos tienen como resultado ampliar el espacio de búsqueda de la

solución al problema de diseño

93

Gráfico #10 Método de Estudio 3 por Díaz y Matheus (2017)