Post on 29-Aug-2021
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.
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.
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