ESTÁNDARES PARA EL DISEÑO VISUAL E INFORMACIONAL DE APLICACIONES MÓVILES; STANDARDS FOR THE VISUAL AND INFORMATIONAL DESIGN OF MOBILE APPLICATIONS

1. Introducción

Los adelantos alcanzados en las Tecnologías de la Información y las Comunicaciones (TIC) han favorecido nuevas formas de interacción hombre – máquina. Los principales resultados se circunscriben al desarrollo de la tecnología móvil. Estos aparatos han sido comercializados con gran masividad por ser herramientas con fáciles usos. Actualmente se torna necesario un dispositivo de fácil transportación, y que guarde la información que desee el usuario. En las preferencias de los usuarios se sitúan celulares y tabletas.

Las crecientes necesidades de los usuarios y los adelantos en las TIC aceleran el diseño de aplicaciones para los dispositivos móviles (apk). Las apk son interfaces visuales programadas con información oportuna para cubrir necesidades comunicativas, de entretenimiento, educativas, entre otras. La relación entre las personas y los dispositivos se complementan con diseños visuales que satisfagan las comunidades de usuarios. Las aplicaciones para dispositivos móviles pueden desarrollarse en diferentes plataformas las cuales son Google, Apple, Microsoft, entre otras.

El diseño visual e informacional de las aplicaciones móviles se gesta a partir de estándares poco descritos que limitan el conceso entre los especialistas. El diseño de la comunicación visual como disciplina científica se ha enfocado fundamentalmente hacia la identidad corporativa, el diseño de interiores, el diseño textil, entre otros. Lo cual deja al margen el diseño Web y específicamente el diseño visual e informacional de aplicaciones móviles. La responsabilidad en el diseño visual e informacional la ostentan desarrolladores e informáticos que centran su atención en aspectos de tipo técnico, dejando al margen el impacto social de dichos productos.

La selección, organización y diseño de la información para aplicaciones móviles no se reconoce en la mayoría de los grupos de especialistas como una actividad fundamental. La competencia que establece el desarrollo tecnológico en ocasiones puede obviar la finalidad de estos dispositivos: las personas. A partir de la literatura científica consultada se identifica la poca existencia de fuentes que aborden el uso de estándares para el diseño visual e informacional de aplicaciones móviles. Se planteó como objetivos del estudio:

1. Determinar aspectos teórico-conceptuales acerca del surgimiento y desarrollo del diseño visual e informacional para aplicaciones móviles y,

2. Identificar los estándares usados para el diseño visual e informacional que son aplicables a aplicaciones móviles.

2. Materiales y métodos

La investigación se clasifica como descriptiva. Se centra en identificar los principales estándares para el diseño visual e informacional de las aplicaciones móviles. Se realiza una fundamentación histórica de la evolución de los estándares en apk. Se emplearon métodos en el nivel teórico y en el nivel empírico, destacándose el Análisis Documental Clásico. Lo cual permitió efectuar un análisis de los antecedentes y las publicaciones que se han realizado sobre la temática de estándares para el diseño visual e informacional de aplicaciones móviles. Se consultaron publicaciones seriadas bases de datos y buscadores científicos como DOAJ y SciELO.

3. Resultados y discusión

El progreso tecnológico brinda una amplia posibilidad de mejoras en el mundo de las telecomunicaciones. Lo que ha favorecido la creación de dispositivos móviles al alcance de todas las personas. Un paso importante para los futuros perfeccionamientos tecnológicos en la telefonía celular. Cada vez son más los sofisticados teléfonos que necesitan el diseño de atractivas y rápidas aplicaciones para atraer a la mayor cantidad de usuarios.

Las aplicaciones móviles son un elemento fundamental para el desarrollo del teléfono. Constituyen un tipo de programa diseñado como herramienta para permitir al usuario realizar diversas tareas. Las aplicaciones mencionadas se deben ajustar a estándares (normas, medidas, criterios y políticas) aprobadas por grupos de expertos autorizados a nivel internacional. Los estándares representan la forma legal por las cuales debe regirse un desarrollador de aplicaciones móviles. Según Montoto (2018) se corresponden a un conjunto de recomendaciones dadas por el W3C y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en el Web.

Martínez y Cueva (2007) amplía que un estándar debe basarse en principios probados en la práctica. Además, representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel local, nacional o internacional. En correspondencia con lo expresado anteriormente los autores Murazzo y otros (2010) precisan que los estándares permiten alcanzar mejores y mayores beneficios. Los estándares son un instrumento que ayuda a afrontar de mejor forma el reto de desarrollar aplicaciones móviles adecuadas a todo tipo de dispositivo móvil (Saavedra, 2015). En los autores analizados existen elementos comunes a la hora de referirse a estándares para diseñar app. Pueden señalarse su aprobación por una comunidad especializada en la temática y la seguridad que brindan los estándares en el proceso de desarrollo de aplicaciones para dispositivos móviles.

La forma de almacenamiento y acceso a la información ha evolucionado. En el siglo XX aparecieron los medios de comunicación masiva (periódico, radio y televisión). Posteriormente surge la internet donde comenzó siendo una red informática de ARPA (llamada Arpanet).

El objetivo de la W3C es la Interoperabilidad Web donde publica estándares abiertos (no propietarios) para lenguajes Web y protocolos. Con el fin de evitar la fragmentación del mercado y, por lo tanto, de la Web. Ejemplo de esto son los lenguajes de hipertexto, las normas que establece para que el usuario entienda la visualización e información que se desea transmitir cuando se crea un producto tecnológico.

Un lenguaje de hipertexto permite escribir texto de forma estructurada. Un documento así, no sólo se compone de texto, sino también puede contener imagen, sonido, video. Por lo que el resultado puede considerarse como un documento multimedia. Los documentos Hypertext Markup Language HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores. También están los componentes XML y HXML que son importantes porque permiten el funcionamiento de la Web. (Berners-Lee, Dimitroyannis, Mallinckrodt y McKay, 1994).

Era necesario que el desarrollo tecnológico llegara a todos los usuarios por lo que surge la Web Accessibility Initiative (WAI). La WAI publica la Guía de Accesibilidad de Contenido Web, diseñados pensando en la accesibilidad de todos los usuarios que pueden acceder en condiciones de igualdad de contenidos. La Organización Mundial de la Salud a través de la Clasificación Internacional del Funcionamiento de la Discapacidad y la Salud ayuda a que los usuarios discapacitados puedan acceder a la Web. Los videos disponen de subtítulos para los usuarios con dificultad auditiva. Si el tamaño del texto es lo bastante grande la persona con problemas visuales podrá leerlo sin dificultad (Gil, 2014).

Para el diseño de cualquier sitio Web se tienen en cuenta varios estándares como los componentes a partir de lenguaje de programación, también la visualización e informatización de estos que depende de la transmisión de datos entre dos computadoras, por lo que es importante optimizar la cantidad de información que se envía entre ambos, de tal manera que quien la recibe pueda verla adecuadamente y acceder fácilmente a ella. Según la institución Desarrollo de Aplicaciones Móviles (2017): las aplicaciones deben soportar las distintas resoluciones de los distintos tipos de dispositivos. El instalador de las aplicaciones no debe superar los 10 MB. No embeber imágenes y videos como contenido estático que hagan que los instaladores sean más pesados. Las aplicaciones que no tengan backend propio pueden utilizar los portales disponibles para acceder a los datos. De este modo se pueden consumir contenidos dinámicos.

La lista de aplicaciones de cada ministerio debe estar actualizada. Si la aplicación no está más en funcionamiento (o con soporte) hay que remover su acceso. El código fuente de las aplicaciones deberá ser simple, fácil de comprender, escalable, flexible y deberá ser acompañado de la documentación necesaria para poder asegurar su continuidad soportando un futuro cambio de proveedor.

Generar y proveer los manuales de uso necesarios para el ciudadano que utiliza la aplicación móvil. Los nombres de las aplicaciones deberán contar con la aprobación de la dirección que desarrolle la apk. Los iconos lanzadores de las aplicaciones serán creados y aprobados de igual forma por las instituciones o grupos multidisciplinarios especializadas en el diseño multimedia. La paleta de colores a utilizar es la definida en el manual de identidad visual para Web y aplicaciones móviles. Los usos son los siguientes:

Primario: #0072BC. Es el color primario que se utiliza en elementos como links, botones, etc.

Secundario: #00B9F1. Se utiliza para ciertos elementos del contenido que necesitan ser destacados, por ejemplo, en iconos.

Complementario: #FD4138 Se utiliza para elementos que necesiten un destaque diferencial y en ciertos elementos para dar calidez en páginas muy extensas que no contengan fotografías.

Neutros:

Texto: #111111

Gris claro: #767676

Bordes y detalles: #CCCCCC

Fondo: #F5F5F5

Blanco: #FFFFFF

La animación no debe verse excesiva, puede ser que las personas se sientan distraídas.

La iconografía de las aplicaciones representa los iconos de productos con la expresión visual de los productos y herramientas de una marca. Los iconos del sistema representan un comando, archivo, directorio o acciones comunes.

También el diseño visual debe brindar herramientas necesarias para identificar y comprender el proceso de constitución del lenguaje visual. Aplicar los conocimientos teóricos, técnicos y científicos; así como el manejo de los medios, instrumentos y materiales en la creación de imágenes para la información y la comunicación. Proyectar sobre la comunidad en general los conocimientos adquiridos, buscando que el diseño incida en el mejoramiento de la calidad de vida que el ser humano establece con el entorno. Aportar al sistema de producción regional y nacional, desde la construcción de nuevos sistemas de información, productos visuales competitivos que se validen a nivel nacional e internacional (Munari, 2008).

El diseño visual es reflejado por medio de la categorización y la estructuración de la forma visual, además de mejorar la calidad visual del ambiente por medio de la eficiencia en la realización de productos visuales. El Diseño Visual aporta a la sociedad mediante la generación de estructuras visuales que acercan al individuo al conocimiento además aporta al sistema cultural fomentando valores de identidad y equilibrio, puesto que facilita el reconocimiento de los individuos de sus contextos geográficos particulares, a la vez que garantiza su acceso al caudal de saberes producidos universalmente. También interviene en el campo de la investigación y su relación con la comunicación visual al profundizar en las estructuras visuales y su relación con las teorías cognitivas de la percepción y el aprendizaje (Munari, 2008).

Las consideraciones esenciales sobre un sitio Web giran, cada vez más, en torno a su facilidad de uso, claridad y funcionabilidad ante el creciente volumen de información disponible en la red.

Desde el punto de vista informacional la W3C (2018) propone las siguientes etapas:

· Análisis de la información que presentará el Web

· Búsqueda y organización

· Diseño informacional del sitio (diseño gráfico)

· Elaboración de la interfaz

· Publicación del sitio en Internet (Pérez, 2003).

Subordinar el diseño y la programación del Web al control del usuario, a sus requerimientos organizativos y sus niveles cognoscitivos. Las herramientas que debe utilizar el usuario deben ser sencillas y fáciles de manejar (imágenes estáticas y animadas, iconos, vínculos, etc.). Tratar de lograr un todo armónico entre el fondo de las páginas y el contenido que se muestra. Si hay muchos textos y es preciso usar un tamaño de fuente pequeño, se deberá contrastar con el fondo para aumentar su legibilidad. Crear un índice en la página inicial que guíe al navegante y muestre el contenido esencial del sitio en cuestión. Estudiar el espaciado, el tamaño de fuente y el interlineado, muy importantes para la comprensión de los textos y la estética de la página. Los títulos, subtítulos y encabezados pueden utilizarse para enfatizar algo o dar un toque de color o de alegría. Desarrollar ilustraciones en correspondencia con el contenido de la página. Utilizar correctamente los colores, pues su abuso puede producir estados de ánimo y emociones indeseables, que vayan desde el aburrimiento en el mejor de los casos, hasta que los visitantes se marchen del sitio. Emplear sólo los gráficos animados necesarios para no abarrotar la página Web, cansar a los navegantes o demorar el acceso (Pérez, 2003).

Los estándares son utilizados para el desarrollo de aplicaciones móviles ya que contribuyen al buen manejo de la información y visualización del producto. Según Rodríguez (2015) una aplicación móvil es una aplicación de software que se instala en dispositivos móviles o tablets para ayudar al usuario en una labor concreta, ya sea de carácter profesional o de ocio y entretenimiento, a diferencia de una Web app que no es instalable.

Las aplicaciones móviles o apps son piezas de software diseñadas para ser instaladas y utilizadas en dispositivos móviles, que se adaptan a las limitaciones de estos dispositivos, pero también permiten aprovechar sus posibilidades tecnológicas (por ejemplo, la localización para servicios adaptados al contexto o el acelerómetro en algunos videojuegos (Aguado y Estrada, 2012).

Según IBM Software (2012), las aplicaciones nativas tienen archivos ejecutables binarios que se descargan directamente al dispositivo y se almacenan localmente. Las apk Web son aquella que necesitan de la Internet para su funcionamiento. Las aplicaciones híbridas son la combinación del desarrollo de apk nativas y de la tecnología Web, son desarrolladas para múltiples plataformas ya que aprovecha todas las características que ofrecen los dispositivos modernos.

Las normas establecidas por la W3C (2018) ofrecen también posibilidades de desarrollo para una aplicación en un sitio Web y para el resto de las aplicaciones móviles. La norma ISO 9241-11 (2018) establece que el uso adecuado del color es especial para todos las apk para propiciar continuidad visual y ayuda en la comunicación a los usuarios. Los colores en una apk deben funcionar bien juntos, no en conflicto. Se prefieren los colores que no resalten más de lo normal, ejempo: colores pasteles, blanco y negro.

Para el diseño de iconos la compañía utiliza aproximadamente la medida 29x29, 40x40, y 60x60 píxeles etc. Windows emplea entre los colores lima, verde, verde esmeralda, verde azulado, cyan, cobalto, añil, violeta, rosa, magenta, carmesí, rojo, naranja, ámbar, amarillo, marrón, verde oliva, acero, malva. Para la iconografía la compañía utiliza las medidas 48x48, 57x57 píxeles etc. Donde usa colores específicos como blanco, plata, gris, negro, rojo, verde, azul, azul marino, naranja, rosa, azul claro, verde claro, rojo claro, amarillo.

Los estándares para el diseño visual e informacional deben su surgimiento y evolución particularmente al desarrollo de las aplicaciones móviles permitiendo el estudio de diversas normas que establecen las comunidades de expertos para mejorar y ayudar al diseñador a que el desarrollo de una apk es más sencillo. La literatura recoge amplia variedad de criterios de autores y de corporaciones que expresan las formas en que se crea una apk, según la bibliografía referenciada. Los estudios anteriores acerca del adelanto de los estándares visuales e informacionales para diseñar apk ha posibilitado un mayor acercamiento al desarrollo de la tecnología y un mayor incremento en el mercado mundial. Para finalizar se aborda las distintas características que posee las apk en cuanto a tipos que existen y las distintas compañías que usan estándares para el diseño especifico de sus aplicaciones móviles.

Los estándares que favorecen la organización, estructuración y el diseño visual e informacionalmente de las aplicaciones móviles se muestran en la Tabla 1.

Lo anterior tiene su aplicabilidad en la Arquitectura de Información (AI). La AI es un área del conocimiento que, junto con el diseño visual y la programación, contribuye al diseño Web. Es la disciplina que emplea los principios de la ciencia de la información, utilizado la organización, representación y recuperación de la información y del conocimiento; y los aplica a los nuevos y actuales espacios digitales.

Tabla 1. Estándares para el diseño visual e informacional de aplicaciones móviles

Dimensiones

Indicadores

Estándares para el diseño visual

- Colores

- Iconografía

- Foco visual establecido para las informaciones importantes

- Presencia de publicidad

- Componentes de diseño a partir del lenguaje de programación

Estándares para el diseño informacional

- Correspondencia entre inventario de contenido y taxonomía

- Sistema de navegación

- Sistema de búsqueda

- Sistema de etiquetado

- Criterios de accesibilidad

- Criterios de usabilidad

Fuente: Elaboración propia

La evolución histórica de investigaciones relacionadas con la AI ha sido caracterizada por Ronda (2008) estableciendo 3 grupos de estudios y etapas, definidas en espacio y tiempo. De estos, el tercer grupo toma importancia a partir del año 1995 como consecuencia fundamental de la masificación de Internet. El último período mencionado se extiende hasta la actualidad y establece como prioridad facilitar a los usuarios la interacción con la Web. El fenómeno descrito procura que las interfaces sean más atractivas y dinámicas de acuerdo con las nuevas necesidades de los usuarios. La AI es definida como la disciplina encargada del estudio, análisis, fundamentación y disposición de los contenidos en un sistema de información.

Los sistemas de organización son las estructuras y esquemas que garantizan la adecuada visualización de los contenidos en la interfaz gráfica. Están compuestos por: esquemas y estructuras de organización. “Un esquema de organización delimita las características compartidas de los elementos que integran el contenido y las influencias del agrupamiento lógico de estos elementos. Una estructura de organización define las relaciones entre los elementos de contenidos y los grupos de estos elementos” (Rosenfeld y Morville, 2006). Ejemplo de ello son las taxonomías.

Los sistemas de navegación son estructuras arquitectónicas que ordenan y agrupan los contenidos bajo categorías que conforman una clasificación. Esta ordenación y esta agrupación están diseñadas de forma intencional para cubrir una serie de objetivos importantes. El sistema de navegación debe prevenir que los usuarios puedan hallarse perdidos frente al ambiente Web y experimenten sensaciones de confusión, frustración e ira, entre otras. Contiene los índices, el mapa y frames o marcos.

Los sistemas de navegación se dividen en básico y no básico. Dentro del sistema básico se identifica un subsistema global de navegación que orienta, atendiendo a los elementos principales del espacio informacional. Este sistema contiene elementos como los mapas, las guías y los índices. Para garantizar la búsqueda y recuperación de información de forma eficiente es que se diseñan los sistemas de navegación. Asimismo, se estructuran metadatos que tienen la finalidad de facilitar su recuperación, autentificación, evaluación, preservación y/o interoperabilidad.

4. Conclusiones

La organización y representación de la información para el diseño de aplicaciones móviles presenta estándares abordados por variados desarrolladores e instituciones. Los estándares para el diseño visual e informacional de aplicaciones móviles constituyen el resultado de un proceso evolutivo de las tecnologías de la información y las comunicaciones y las necesidades de los usuarios que las consumen.

El diseño visual de aplicaciones móviles constituye un elemento esencial en el éxito de estos productos multimedia. La variedad de procederes en el diseño visual e informacional sobre esta temática propició disimiles soluciones. Generalmente en el desarrollo de aplicaciones móviles se ha concedido mayor relevancia a la programación y el aspecto informático del producto. Lo cual desdeña el elemento visual. Una interfaz amigable y adecuada a las necesidades de los usuarios potenciales requiere investigaciones que favorezcan equilibrar el proceso de desarrollo de apps en torno a las cuestiones visuales.

La utilización de estándares para el diseño visual e informacional de aplicaciones móviles permite legitimar las cuestiones visuales como un elemento esencial en los productos multimedia. Para el desarrollo de estas actividades se necesitan profesionales de la información y la comunicación integrados en equipos multidisciplinarios.

5. Referencias bibliográficas

Aguado, J., y Estrada, F. (2017). Guía de accesibilidad de aplicación móviles (APPS). Madrid: Ministerio de Hacienda y Función Pública. https://administracionelectronica.gob.es/pae_Home/pae_Estrategias/pae_Accesibilidad/pae_documentacion/pae_eInclusion_Accesibilidad_de_apps.html

Berners-Lee, T., Dimitroyannis, D., Mallinckrodt, J., y Mckay, S. (1994). World Wide Web. Computers in Physics, 8(3), 298-299. https://aip.scitation.org/doi/abs/10.1063/1.4823300

Centro de Investigación de la Web. (2017). Cómo funciona la Web. Santiago de Chile: Universidad de Chile. https://repositorio.uchile.cl/bitstream/handle/2250/120326/libroWeb-NV.pdf?sequence=1

Desarrollo de Aplicaciones. (2017). Guías técnicas para el desarrollo de soluciones móviles. Recuperado de: https://www.euskadi.eus/documentacion/guia-tecnica-para-el-desarrollo-de-soluciones-moviles-p-class-migasestandar-grupo-a-href-informaciondesarrollo-aplicacionesweb01-a4ogainfes-desarrollo-de-aplicaciones-a-p/web01-a4ogainf/es/

Gil, S. (2014). Cómo hacer “Apps” accesibles. Madrid: CEAPAT-IMSERSO. https://riberdis.cedd.net/handle/11181/4171

IBM Software. (2012). El desarrollo de aplicaciones móviles nativas, web o híbridas. Recuperado de: ftp://ftp.software.ibm.com/la/documents/gb/commons/27754_IBM_WP_Native_Web_or_hybrid_2846853.pdf

ISO 9241-11. (2018). Ergonomía de la interacción hombre-sistema. Recuperado de: https://www.une.org/encuentra-tu-norma/busca-tu-norma/norma?c=N0060329

Martínez, A., y Cueva, J. (2007). Estándares y guías. Recuperado de: https://di002.edv.uniovi.es/~cueva/asignaturas/doctorado/2004/9EstandaresGuias.pdf

Montoto, A. (2018). La importancia de los estándares web. Recuperado de: https://dominointernet.com/la-importancia-de-los-estandares-web/

Munari, B. (2008). Diseño y comunicación visual: contribución a una metodología didáctica. Barcelona: Gustabo Gil. https://ggili.com/dise-o-y-comunicacion-visual-libro-2883.html

Murazzo, M., Millán, I., Rodríguez, N., Segura, D., y Villafañe, D. (2010). Desarrollo de aplicaciones para Cloud Computing. Ponencia presentada al XVI Congreso Argentino de Ciencias de la Computación.

Pérez, J. (2003). Diseño informacional de los sitios Web. Acimed, 11(6), 1-18. https://scielo.sld.cu/scielo.php?script=sci_arttext&pid=S1024-94352003000600010

Rodríguez, M. (2015). Definición de una arquitectura para aplicaciones móviles. IBM: New York. https://www.academia.edu/8351690/Definici%C3%B3n_de_una_arquitectura_para_aplicaciones_m%C3%B3viles

Ronda, R. (2008). Arquitectura de Información: análisis histórico-conceptual. No solo Usabilidad, 7(2008), 1-18. https://www.nosolousabilidad.com/articulos/historia_arquitectura_informacion.htm

Rosenfeld, L., y Morville, P. (2006). Information Architecture for the World Wide Web. New York: O´Reilly Publisher. https://www.oreilly.com/library/view/information-architecture-for/0596527349/

Saavedra, E. (2015). Estándares y lenguajes de marcado para el desarrollo de aplicaciones orientadas a dispositivos móviles. Recuperado de: https://2009.encuentrolinux.cl/wpcontent/uploads/2011/07/estandares_aplicaciones_moviles .pdf

W3C (2018). Web design and applications. Recuperado de: https://www.w3.org/standards/webdesign/