App para monitoreo de cuarto de máquinas by Nelly Martínez

Prototipo de Aplicación Móvil para Monitoreo de Cuarto de Máquinas

Nelly Angélica Martínez Correa 1

Maestría en Diseño Gráfico Abril 2014 Asesor: Luis Aceves Gutiérrez

Índice Introducción.................................................4 Empresa...........................................4 Antecedentes...............................................6 Historia y Contexto......................8 Descripción del Problema.........12 Objetivos.......................................13 Solución Propuesta......................14 Alcances y Limitantes.................15 Marco Teórico............................................16 Conceptualización.......................18 Definición......................................21 Diseño............................................23 Método de Trabajo....................................28 Entrevistas.....................................30 Personas........................................38 Mapa de Experiencia...................40 Arquitectura de Información....41 Diseño............................................42 Prototipo de Aplicación...........................52 Contenido.....................................54 Propuesta Gráfica........................55 Conclusiones..............................................59 Bibliografía...................................................61

La era actual está marcada por el cambio acelerado y la aparición de nuevas tecnologías adoptadas en la vida diaria. En ella, el diseño se ha extendido hacia estas nuevas formas de interacción y de representación, entrando en escena no solamente las herramientas digitales, sino nuevos paradigmas y con ello nuevas posibilidades. Más aún, el diseño sale no solamente de los medios tradicionales, sino también de las “áreas tradicionales”. El diseño industrial tiene tiempo dedicándose a los objetos materiales, pero este proyecto de diseño en el mundo industrial no se trata de objetos, sino que apuesta al uso de nuevas tecnologías para mejorar un proceso de trabajo industrial. Para ello, se aplicaron conceptos de diseño de información y diseño gráfico, junto con la investigación previa requerida.

Empresa

Datos Generales: Dirección: Opalo 115, col. Cuauhtémoc. CP 66450. San Nicolás de los Garza, Nuevo León. Teléfono: (81) 8030 1120 Sitio Web: www.quimicalderas.com

Datos del Representante: Nombre: Ing. Andrés Gerardo Martínez Correa Teléfono: 8030 1120, ext. 802. E-mail: amartinez@quimicalderas.com

Descripción: Quimicalderas, S.A. de C.V. es una microempresa que se dedica a la fabricación y suministro de productos químicos especializados para el tratamiento de aguas industriales, así como el servicio a equipos tales como calderas, torres de enfriamiento, suavizadores y calentadores industriales.

Historia: De acuerdo con la información disponible en su sitio web, la empresa fue fundada en 1993, luego de haber trabajado bajo otras razones sociales en el área de fabricación de equipos para el tratamiento de aguas, así como el manejo de aditivos químicos en procesos como refinación de petróleo, fabricación de acero, azúcar, cemento, entre muchos otros. De esta manera se optó por la especialización en el tratamiento químico para equipos de tratamiento de agua [Quimicalderas, 2014]. A lo largo de los años, Quimicalderas ha tenido clientes de muy diversas áreas, desde refinerías, fábricas y hospitales, hasta gimnasios y restaurantes.

Objetivos de la Empresa: o “Ayudar a nuestros clientes a que enfoquen todos sus recursos en sus metas de negocio, mientras nosotros satisfacemos sus necesidades de operación, brindando productos y servicios de primer nivel con personal plena e integralmente desarrollado.

4 4

o Brindar una solución completa para los usuarios de calderas, ofreciendo un servicio integral preventivo que le dará larga vida a los equipos.

o Ser la primera opción que los usuarios busquen en referencia al tratamiento de aguas industriales, siendo los líderes que establezcan los estándares que otros seguirán en la industria.” [Martínez Correa, 2014]

Valores: Quimicalderas tiene firme la creencia del bienestar personal y familiar como base para el desarrollo profesional, estableciéndolo junto con otros temas en un credo que se transcribe a continuación: En Quimicalderas asumimos la responsabilidad de dirigir el desarrollo de la empresa con un espíritu de superación que nos lleve a la excelencia como personas, como ciudadanos, como miembros de nuestras respectivas comunidades y como personas de empresa. Nuestra superación debe estar centrada y motivada en los siguientes principios: o Creemos en la existencia de un ser supremo y juez definitivo. o Creemos en la familia como la célula primaria de la sociedad y de esta empresa, y es nuestro deber procurar su desarrollo, engrandecimiento y compromiso con nuestros ideales. o Creemos en los derechos humanos como inherentes a la condición de la persona, sin concesión de nadie. o Creemos que todos los mexicanos tenemos derecho a una vida digna, así como la obligación de contribuir a ello de acuerdo a los bienes espirituales y materiales que cada uno haya recibido. o Creemos en la conjugación de trabajo, estudio, ahorro, deporte, y descanso como la formula de superación del individuo en todos los sentidos. o Creemos en la libertad y en el derecho a la propiedad con sentido social. o Creemos en la iniciativa privada como promotora principal del desarrollo económico, social y cultural de toda la comunidad y como responsable de promover la calidad del medio ambiente. o Creemos en la integridad, en el respeto y la justicia como normas de las relaciones entre empleados, socios, clientes y proveedores de bienes y servicios. Trataremos a los demás como desearíamos ser tratados nosotros. o Creemos que la comunidad tiene derecho a demandar que todas las personas con responsabilidades dentro de la empresa se comporten siempre con sentido ético y se desempeñen con probada honestidad. [Quimicalderas, 2014].

Antecedentes

Historia y contexto Sería difícil tratar de definir el inicio de la ingeniería en la historia de la humanidad, pues desde tiempos muy antiguos se han adaptado formas de aprovechar ciertos materiales y técnicas para beneficio de la sociedad. Los ingenieros de Selmec Equipos industriales, S.A. de C.V., quienes representan a la marca de calderas Cleaver Brooks en México, editaron y publicaron a manera de libro un Manual de Calderas [Selmec, 1997], en el que explican la generación y utilización del vapor en el ambiente industrial. En este se menciona ya como “primeros ingenieros” a quienes excavaron los canales en Mesopotamia y antiguo Egipto, así como las diferentes obras públicas de las antiguas ciudades. Sin embargo, el gran hito que marcaría el inicio de una etapa muy importante en la historia de la humanidad es sin duda el invento de la máquina de vapor por James Watt en 1768, con lo cual se dio inicio a la Era Industrial. [Selmec, 1997]. Máquinas de vapor Tanto las máquinas de vapor como los motores de explosión permitieron un abrupto avance en la producción mundial, pues se calcula que para 1790 ya se había sustituido la capacidad de trabajo de unos 3 millones de hombres, por la fuerza del vapor en las máquinas. [Selmec, 1997]. Es por eso que fácilmente se puede considerar que la generación de vapor para el aprovechamiento de su energía en el ámbito industrial es una de las bases del progreso del ser humano, y es aquí precisamente donde reside la importancia de las calderas. Una caldera es un recipiente que se utiliza para calentar agua y canalizar el vapor que se crea, para su aprovechamiento en la industria. Su estructura es similar a la de un bóiler tradicional utilizado para calentar el agua de uso residencial. En el uso cotidiano de una caldera (que generalmente trabajan las 24 horas del día) resulta muy necesario su mantenimiento no solamente en la parte mecánica del aparato, sino una serie de medidas preventivas en la parte química del agua.

Mantenimiento de la máquina: El agua que se usa Daniel J. Flynn, editor de The Nalco Water Handbook, reconoce que un adecuado tratamiento del agua que alimenta a una caldera reduce la demanda de recursos naturales, mejora la eficiencia del sistema, así como mejora el desempeño financiero de la empresa que la utiliza. [Flynn, 2009]. Además de esto, un mejor tratamiento químico del agua extiende la vida útil de la caldera, reduce el riesgo de tener problemas en la operación y reduce el uso de combustible así como de costos y emisiones a la atmósfera. [Flynn, 2009].

“Un mejor tratamiento químico del agua extiende la vida útil de la caldera, reduce el riesgo de tener problemas en la operación” [Flynn, 2009]

A grandes rasgos, el agua más pura que se puede encontrar en la naturaleza es el agua de lluvia, puesto que en lo general el agua contiene sales, minerales y elementos en pequeñas cantidades. Sin embargo, estas pequeñas cantidades cobran mayor importancia conforme se van acumulando en el interior de una caldera; esto debido a que en el ciclo de una caldera, el agua se evapora pero los sólidos que contiene no, de manera que se van acumulando con el tiempo. [Selmec, 1997]. También llamados “depósitos”, estos residuos pueden ser óxidos metálicos, cobre, fosfatos, carbonatos, silicatos, sulfatos y contaminantes, así como una variedad de compuestos orgánicos e inorgánicos. [Port, Herro. 1991].

Estos son indeseables, pues de acuerdo con Robert D. Port y Harvey M. Herro, repercuten en la operación de la caldera. Aún una pequeña cantidad de depósitos puede causar un incremento considerable en la temperatura de las paredes internas de la máquina, pues se crea un efecto aislante que no deja salir el calor hacia donde se debe canalizar. Al mismo tiempo, como el calor no sale a donde debería, la caldera se vuelve ineficiente pues ya no logra generar tanto calor. [Port, Herro. 1991]. Este mismo problema de aislamiento, que genera un exceso de calentamiento en el interior de la máquina, puede llegar a causar también grietas o rompimientos en las paredes de los tubos interiores, terminando en un accidente mayor. Otra forma en la que pueden llegar a ocurrir fugas internas es por la corrosión de los metales. Una forma de operación es que una vez que se generó el vapor y se utilizó su calor, el vapor vuelve a condensarse a forma de agua y ésta se inyecta de regreso a la caldera. Esto se llama retorno de condensados [Flynn, 2009], pero si no se cuida, se puede volver muy corrosivo y dañar las tuberías internas del equipo. La presencia de pequeñas cantidades de contaminantes en el vapor o el agua en retorno puede a la larga disminuir el pH y acelerar la corrosión de la mayoría de los metales. El dióxido de carbono y oxígeno son los gases más corrosivos para los metales ferrosos, mientras que la combinación de amoniaco y oxígeno son lo más corrosivo para las aleaciones de cobre. [Flynn, 2009]. Es por esto que las empresas que cuentan con calderas deben contemplar también un mantenimiento preventivo en el que continuamente se estén monitoreando las características del agua, de manera que se eliminen o se mitiguen aquellas sustancias que podrían afectar negativamente el desempeño de la máquina. Así mismo, la operación óptima no implica solamente agregar productos químicos especializados (tales como neutralizadores o inhibidores de corrosión), sino un análisis específico del agua en diferentes momentos; es decir, un monitoreo constante en el que se analicen una serie de parámetros para definir el suministro de productos adecuado.

Si se recircula el agua de la caldera y no se monitorea, se puede volver muy corrosiva y dañar las tuberías internas del equipo.

Monitoreo Desde la invención de las calderas, los usuarios las compraban y ponían a trabajar sin poner atención al mantenimiento por parte del agua de alimentación. Después de un tiempo, al abrir el equipo se encontraban con problemas como tubos corroídos, lo cual reclamaban al proveedor de la caldera como garantía. Sin embargo, este y otros problemas no se deben a defectos en el equipo, sino a la falta de tratamiento químico del agua que usa.

Anteriormente, el procedimiento consistía en:

Una visita a la empresa, en donde se tomaban muestras de agua del cuarto de máquinas.

Por esta razón, los proveedores comenzaron a hacer evaluaciones constantes de las calderas, para hacer las recomendaciones pertinentes al dueño y concientizarlo sobre el mantenimiento químico necesario. Incluso un siglo después, los manuales de operación de calderas indican que es necesario contar con el expertisse de un especialista en tratamiento de agua para uso industrial. En el tema “Cuidado de Calderas” del Manual Selmec de Calderas, de la marca Cleaver Brooks, se especifica: “Deberá consultarse con expertos en tratamiento de agua. Ellos analizarán su agua y le recomendarán el tratamiento adecuado basado en el análisis y cantidad de agua cruda que usarán” [Selmec, 1997]. “Los consultores en tratamiento de agua también deberán recomendar el procedimiento y frecuencia de purgas para reducir la concentración de sales dentro de la caldera. Sus recomendaciones serán la mejor arma para prevenir la formación de incrustación” [Selmec, 1997].

Las muestras se llevaban al laboratorio, donde un ingeniero químico realizaba diversos análisis y realizaba un reporte.

Anteriormente, el procedimiento consistía en una visita a la empresa, en donde se tomaban muestras de agua del cuarto de máquinas. Éstas se llevaban al laboratorio, donde un ingeniero químico realizaba diversos análisis y realizaba un reporte, y dependiendo de los resultados, se informaba al dueño de la caldera si era necesario agregar a algún producto químico a los equipos o purgar el agua. [Martínez Chapa, 2014]. Con el paso del tiempo, se implementaron análisis químicos simplificados, que pudieran realizarse en el mismo cuarto de máquinas, sin tener que llevar la muestra al laboratorio. Sin embargo, se seguía con la necesidad de trasladarse al escritorio para elaborar el reporte escrito. [Martínez Chapa, 2014].

Dependiendo de los resultados, se informaba al dueño de la caldera si era necesario agregar a algún producto químico a los equipos o purgar el agua.

[Martínez Chapa, 2014]

11 11

Descripción del Problema Además de productos químicos especializados, actualmente Quimicalderas ofrece pólizas de servicio a sus clientes, lo cual incluye un monitoreo constante a través de la toma y análisis de muestras de agua de los aparatos de un cuarto de máquinas, tales como calderas, suavizadores o torres de enfriamiento. El Ing. Martínez González, quien está a cargo de este monitoreo, describe que se realiza a través de la visita a la empresa cliente. El ingeniero toma muestras y las analiza utilizando instrumentos especializados (por ejemplo, medidor de pH) así como reactivos analíticos que determinan los parámetros de interés. Martínez González escribe los resultados de estos análisis en una libreta de hojas de papel o bitácora, y posteriormente acude a su oficina a hacer la captura de estos datos a la computadora. Una vez al mes se elabora un resumen en el que promedian los valores que cada parámetro tuvo a lo largo del periodo, y estos se muestran en una tabla que incluye también los límites establecidos para cada uno. Este resumen se captura y calcula en una hoja de Microsoft Excel, en un proceso que dura alrededor de dos horas y que arroja como resultado un cuadro como el siguiente:

Libreta en la que actualmente se escriben los resultados de los análisis de campo.

Posteriormente, se redacta un reporte que se entrega al cliente en hoja membretada, ya sea de papel o en PDF. En este modelo actual, indica Martínez González, pueden transcurrir hasta 3 días desde que el ingeniero de servicio realiza la visita al cuarto de máquinas hasta que el cliente o los supervisores pueden visualizar el reporte de la visita. De esta manera, los clientes reciben el resumen mensual, pero no pueden consultar la información específica de cada inspección.

Objetivos General Ofrecer un prototipo de aplicación móvil que reduzca el tiempo de manejo de datos desde la visita al cuarto de máquinas hasta el informe al cliente, de manera que se haga más eficiente el flujo de trabajo del ingeniero de servicio. Particulares o Informar en el momento al usuario si existe una anormalidad en las mediciones que realice, así como las medidas correctivas que debe tomar. o Reducir el tiempo que el ingeniero de servicio destina al proceso de reportar una visita, eliminando el paso de tener que ir a la oficina para transcribir los datos a la computadora. o Alertar al ingeniero acerca de cuestiones que deben ser atendidas en el cuarto de máquinas o fuera de este. o Permitir al usuario administrar sus recordatorios. o Facilitar la consulta del historial detallado de mediciones que se han realizado en los equipos.

Solución Propuesta Actualmente, Quimicalderas tiene un proceso largo para dar a conocer la situación de un determinado equipo (caldera, torre, etc), pues desde que se recaba la información hasta que se visualiza el reporte pueden pasar hasta unos tres días. Con la implementación del proyecto, el ingeniero de servicio reduciría este proceso a solamente el tiempo que dura su visita al cuarto de máquinas, pues ahí mismo se llevaría a cabo la captura, el resumen e informe de datos a través de la aplicación en el dispositivo móvil. En esta aplicación se podrá llenar un formulario con los datos del equipo, al mismo tiempo que se corrobora que se encuentren en los rangos permitidos; además, se enviaría el reporte inmediatamente, tanto al cliente como al resto del staff de la prestadora de servicios. La solución se divide en las siguientes etapas: 1- Contenido de la aplicación Se discutió tanto con dos ingenieros de servicio como con un ingeniero químico para analizar la información que debe cubrir el reporte de una visita al cuarto de máquinas: qué equipos se revisarían, qué parámetros se deberían verificar en cada equipo y cuáles son los rangos aceptables de cada uno de ellos. Igualmente, se discutió sobre el procesamiento y destino final de la información. 2- Propuesta gráfica para el dispositivo HTC Sensation. Se diseñaron layouts que comprenden las pantallas principales de la aplicación, de manera que estén acorde a la identidad visual corporativa de Quimicalderas, y se hicieron montajes sobre el dispositivo. 3- Creación de experiencia móvil. El prototipo de la aplicación requería una experiencia móvil que estuviera enfocada a la productividad, pues habría de usarse como herramienta de trabajo. Por ello se verificó que el prototipo cumple con los objetivos por la parte funcional de la aplicación, contemplando el diseño de interacción específicamente para el perfil del ingeniero de servicio que habrá de usar el dispositivo.

Conceptualización Investigación sobre los antecedentes, la necesidad y el contexto de la situación en la cual se ha de utilizar la aplicación. Para ello, se utilizaron entrevistas y entrevistas contextuales.

Definición Perfil de “personas”, esquema gráfico del “journey map” y diagrama de arquitectura de información.

Diseño Wireframes, prototipo digital en la herramienta InVision e imágenes diseñadas a detalle de las pantallas finales.

Alcances y Limitantes El dispositivo tipo smartphone modelo HTC Sensation cuenta con una pantalla de 540 por 960 pixeles, lo que representa un acomodo vertical. A pesar de que el aparato tiene acelerómetro, por lo que puede detectar el cambio de posición a horizontal, se decidió utilizar solamente la vertical, pues la esencia de la aplicación son listas (de parámetros, de clientes…) y lo principal a capturar son números, por lo que resulta más cómodo este acomodo, con un teclado numérico similar al de un teléfono. El prototipo representa una aplicación nativa que habrá de funcionar en el sistema operativo Android 4.0 Ice Cream Sandwich, y que puede funcionar no solamente en el aparato especificado, sino en otros smartphones con Android. Su ambiente de desarrollo puede ser alguna de las diferentes APIs (Application Programming Interface) que existen para Android, siendo Eclipse la recomendada por defecto por Google. Sin embargo, el presente proyecto sólo abarca el diseño del prototipo, por lo que no implica desarrollo de programación. El contenido principal de la propuesta comprende una serie de wireframes de alta fidelidad enlazadas a través de la herramienta en línea Invision, de manera que conforman un prototipo que permite a un posible usuario interactuar con las interfaces representadas. InVisionApp es una alternativa en línea para compartir las imágenes de los wireframes realizados. Consiste en subir los archivos (en este caso .png) al sitio de Internet y compartir una liga directa para que otras personas puedan verlos. Además, permite que quien sube las imágenes personalice áreas sensibles en cada una de ellas, creando vínculos hacia otra de las imágenes. El resultado es que, en el modo de previsualización, el público que ingrese a la liga verá el diseño de los wireframes y podrá navegar a través de ellos, haciendo click en las zonas del prototipo de manera similar a como navegaría a través de la aplicación.

Marco Te贸rico Dise帽o de una App

Conceptualización

Dentro del proceso de creación de un producto digital, tanto página web como aplicación para móviles u otros, diversos autores coinciden en que se debe iniciar con la conceptualización y definición antes de diseñar. La conceptualización implica el surgir de una idea, de un “por qué” y un “para qué” de la aplicación, “tiene en cuenta las necesidades y problemas de los usuarios” [Cuello,Vittone 2013]. De esta manera, los autores Javier Cuello y José Vittone clasifican las aplicaciones de acuerdo a la finalidad que han de cumplir, pudiendo ser: Entretenimiento, Sociales, Utilitarias y Productividad, Educativas e Informativas, y Creación. Tener un objetivo es lo que estos autores definen como “el motor de una app, lo que conduce todo” [Cuello,Vittone 2013]. Específicamente en el mundo de las aplicaciones Android, Google especifica que la esencia de las aplicaciones gira idealmente entorno a los siguientes objetivos: “Enamórame”, “Simplifica mi Vida” y “Hazme Genial”. Estas frases, que corresponden a lo que desearía el usuario de una aplicación, representan la visión creativa que tiene Google. Se refieren específicamente a lo siguiente. “Enamórame” comprende no solamente la indiscutible importancia del agrado visual, de la belleza de los objetos, efectos o incluso sonidos; sino a la posibilidad de personalizar algunas cuestiones, ya sea intencionalmente por parte del usuario, o bien, que la aplicación “aprenda” las preferencias de éste, haciendo sugerencias que agilicen su uso.

La visión creativa de Android, tanto en sus aplicaciones como sistema operativo, se centra en los principios “Encántame”, “Simplifica mi vida” y “Házme Genial”. [developer.android.com]

“Simplifica mi Vida” se refiere a cuestiones como: mantener claras y sencillas los textos de interacción con el usuario, utilizar imágenes para explicar ideas más rápidamente que con texto, hacer sugerencias pero dejar que el usuario decida, mostrar lo que se necesite sólo en el momento adecuado y siempre mantener la noción de ubicación. Finalmente, “Hazme Genial” fomenta el enaltecimiento de las personas que usan la aplicación, a través de cuestiones como hacerlos sentir inteligentes incluso si cometen un error y hacer que los novatos puedan hacer tareas que parecían ser de expertos.

Investigación del Usuario Parte de esta fase de conceptualización comprende el realizar investigación acerca del usuario que ha de interactuar finalmente con la aplicación, pues “La información que se obtiene al conocer al usuario permite tomar decisiones de diseño que ayuden a crear aplicaciones intuitivas y, por consiguiente, más fáciles de usar.” [Cuello,Vittone 2013]. Para lograrlo, una de las técnicas es la entrevista, que Russ Unger y Carolyn Chandler [Unger, Chandler, 2009] describen como conversaciones con los actuales o potenciales usuarios del sitio o aplicación que se diseñará. Esta sirve para comprender preferencias y actitudes, pero no se deberán usar para hacer afirmaciones formales acerca del desempeño, pues para esto último indican los autores que es mejor llevar acabo una entrevista contextual. En la entrevista, hay que considerar que la calidad de la información que se recabe, tendrá mucho que ver con la calidad de las preguntas que se hagan. Por ello hay que formular previamente un cuestionario que se enfoque en las experiencias personales del entrevistado.

Las entrevistas son técnicas de investigación del usuario.

Unger y Chandler recomiendan no lanzar preguntas cuya respuesta sea específica o cerrada, ni que lo puedan desviar hacia una tendencia en su respuesta. Las preguntas deben ser simples, neutrales y abiertas, que dejen la puerta abierta a una amplia explicación como respuesta. [Unger, Chandler, 2009]. Selene Castilla describe en su charla User eXperience Research a la entrevista contextual. Indica que se trata no sólo de establecer una relación de confianza con el entrevistado y haber preparado una serie de preguntas que proporcionen la información buscada, sino que también se acompañe a la persona a una jornada normal. Es decir, hacer el recorrido que hace desde que se enfrenta a alguna necesidad hasta que la resuelve. [Castilla, 2013]. De esa manera, durante el recorrido podrán conocerse las situaciones y diferentes contextos en los que el usuario interactuaría con la aplicación, además de comprender mejor sus necesidades y emociones. Con esta técnica se tiene una mejor comprensión de: Los problemas reales a los que se enfrentan los usuarios, el tipo de equipo con el que trabajan, el espacio en el que se desempeñan, su privacidad y las interrupciones que tienen, las notas que hacen y cómo las hacen (teclado, escritos, teléfono), con quiénes más colaboran y otras herramientas que utilicen. [Unger, Chandler, 2009] Esta técnica descrita por Selene Castilla representa una excelente herramienta para conocer el contexto, que Cuello y Vittone definen como “el lugar donde se usará la aplicación: ubica al usuario en un espacio físico determinado que afecta y condiciona la forma que tiene de interactuar con la pantalla. El contexto también tiene en cuenta factores como el ambiente general del lugar, las personas allí presentes y las acciones puntuales que en él se realizan”. [Cuello,Vittone 2013].

Definición

Luego de la formalización del concepto de la idea, sigue la definición. Este paso se refiere tanto a los usuarios como a las funciones, usando metodologías como “Personas” y “Mapa de Experiencia”. Personas El primero de ellos es un concepto que “fue acuñado por Cooper, una compañía de diseño y estrategia ubicada en San Francisco , y es una herramienta de gran utilidad que se usa constantemente en el diseño de interacción actual. Su función es definir modelos o arquetipos de usuarios para los cuales diseñar, teniendo en cuenta sus necesidades y objetivos.” [Cuello,Vittone 2013]. Concretamente, el resultado es un perfil con cara, nombre, historia, ambiciones y objetivos. Es decir, un personaje semi-ficticio. La Guía de Introducción al Design Thinking, del Hasso Plattner Institute of Design at Stanford, indica que para llegar a conformar un perfil de personas, es necesario “identificar temas relevantes como similitudes o diferencias, información demográfica, comportamientos y hábitos comunes, identificadores, fuentes de motivaciones, entre otros”. [HPIDS, 2011]. En este documento se recomienda incluso valerse del nombre que se asignará a la persona: nombres comunes para representar a los grandes grupos de usuarios y nombres menos comunes para representar a los usuarios de grupos más específicos.

Ejemplo de Persona en “Diseñando Apps para Móviles” [Cuello,Vittone, 2013].

El mapa de experiencia sirve para comprender por lo que pasa el usuario. Mapa de Experiencia También llamado “Mapa de Trayectoria”, “Journey Map” o incluso “Viaje del Usuario”, el Mapa de Experiencia es un concepto definido como “una forma de contar visualmente y de principio a fin, el proceso que lleva a cabo una Persona desde que tiene una necesidad hasta que la satisface usando la aplicación.” [Cuello,Vittone 2013]. Se trata de un diagrama en el que se puedan observar diferentes situaciones a lo largo del tiempo, capturando eventos, lugares o incluso reflejando emociones. Esto sirve para visualizar las etapas por las que pasa el usuario, de manera que se pueden apreciar las dificultades que tiene y así se sabrá en dónde enfocarse para que la aplicación pueda usarse mejor y para definir mejor las funciones. En este diagrama se representan los diferentes “touchpoints” de la interacción del usuario con el servicio o aplicación, incluyendo los “momentos de la verdad” en los que la persona pudiera cambiar el rumbo [Tincher], así como las diferentes etapas y cómo se relacionan unas con otras. “La clave es fijarse en todo, ya que algo que pueda ser insignificante, podría terminar siendo un poderoso insight” [HPIDS, 2011]. El contenido y funcionalidad de la aplicación se conceptualizan utilizando el journey map como un método para explorar los caminos y patrones mentales del usuario y “traducir” esto en experiencias digitales. [Hobbs, 2005]. Además, al determinar estas bases de la funcionalidad, también se determina el alcance y complejidad del proyecto.

Diseño

Finalmente, la fase del diseño es en la que todos los conceptos e investigación anteriores se pasan a un plano más tangible. Los principios y buenas prácticas no sólo refieren a experiencia de usuario e investigación previa, sino que se deben llevar estos conceptos a ser aterrizados en la parte gráfica de una app. Color En temas como el color se especifica que no sólo se utiliza para cuestiones de identidad como una paleta de colores corporativos, sino para otras decisiones de diseño. “Como parte de un sistema cromático, el uso consistente, consciente y vinculado al contexto donde se aplica, es lo que lo llena de significado para el usuario” [Cuello,Vittone, 2013] Por otro lado, existen algunos colores que no es solamente eso lo que les otorga cierta connotación, sino que ya la traen desde fuera del contexto de la aplicación, desde el bagaje cultural de los usuarios. Los autores mencionan estos colores como “colores reservados” al hacer la sugerencia de que sean utilizados exclusivamente para lo siguiente: 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. 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. Verde: Mensajes de éxito y confirmación de que una acción se ha realizado correctamente. [Cuello,Vittone, 2013] En cuestión de textos, es usual utilizar el color para diferenciar algunos elementos como palabras clave o citas textuales, sin embargo es necesario considerar que en los productos digitales, también se utiliza el color para distinguir a los elementos tipográficos interactivos, por lo que hay que cuidar la diferencia entre ambos usos para no dar una idea equivocada al lector.

Retícula No solamente en el diseño digital, sino desde antaño, el uso de una retícula (grid en inglés) para acomodar los elementos ha sido una constante. Sin embargo, normalmente se maneja un menor número de columnas en el diseño de un producto editorial, que en el diseño de un producto digital. Jacqueline Howard Bear señala que para grandes cantidades de texto, como un libro con pocas o ninguna ilustración, es mejor usar una retícula más sencilla, de 1 a 3 secciones. Sin embargo, para un folleto, revista o boletín, sugiere una retícula más compleja con más unidades de menor tamaño. [Howard Bear]. Por otro lado, nos encontramos con que en el mundo digital, las retículas pueden ser de 12, 16 o incluso 24 columnas, como indica Nathan Smith en su muy conocido sitio 960.gs. Se trata de un sistema de columnas que se basa en un ancho de 960 pixeles, pues se puede dividir en 26 medidas diferentes y confía en que todos los monitores modernos soportan una resolución de al menos 1024 x 768 pixeles. [Smith, 2008].

El sitio 960.gs ejemplifica la versatilidad de la retícula de 12 columnas.

Estándares Como bien menciona Jakob Nielsen, para la gente en general es más fácil interactuar con aquello a lo que ya está acostumbrada. Es por ello que es muy concreto al numerar sus 10 principios de diseño de interacción y aclarar que “El sistema debe hablar el lenguaje del usuario, con palabras, frases y conceptos familiares al usuario” [Nielsen, 1994]. Esto aplica para muchas cosas, pero en el caso específico del uso de dispositivos móviles se acentúa aún más. Para algunas personas es muy difícil incluso cambiar de sistema operativo en su teléfono celular, pues estaban acostumbrados al anterior. Por todo ello, es necesario también considerar las buenas prácticas y los estándares establecidos en materia de diseño de aplicaciones, tanto en lo general como en determinada plataforma. Por tratarse de una app para uso en un dispositivo con sistema operativo Android, el diseño se basó también en los lineamientos establecidos por Google, como dueño de Android, para los diseñadores y desarrolladores de aplicaciones móviles. Estos estándares se encuentran en el micrositio Developer.andoid.com y abarcan una serie de cuestiones de diseño, desarrollo y publicación. Dentro de las de diseño, destacan las siguientes: Tamaño mínimo: Para el caso de botones o elementos interactivos, el tamaño mínimo es de 48dp, que equivalen aproximadamente a 9 milímetros. Asimismo, el espacio mínimo entre un elemento y otro es de 8dp. [Android Open Source Project] Fuente: La tipografía representativa de Android es la familia Roboto, específicamente en los tamaños más comunes de 12, 14, 18 y 22 sp. [Android Open Source Project]. Iconos: Android especifica los lineamientos tanto de tamaño como estilo, posición, color, opacidad, etcétera. Todo esto dependiendo también de qué tipo de icono se trate. [Android Open Source Project]. Además de estos temas visuales, Android también especifica cuestiones de layout distintivas del sistema operativo, como lo son la Barra de Acción (Action Bar) y el Cajón de Navegación (Navigation Drawer). Es decir, elementos comunes en las aplicaciones de este sistema operativo, los cuales ya son conocidos por el usuario y por tanto, le resultarán fácil de usar. [Android Open Source Project]. El micrositio developer.android.com explica estos estándares.

Este concepto de hacer la aplicación más usable va mucho más allá de utilizar elementos gráficos reconocibles, pues hay una infinidad de conceptos intangibles pero incluso más importantes, definidos por varios autores.

Cabe mencionar las 10 heurísticas que Jakob Nielsen resume para obtener un buen diseño de interfaz.

1. Visibilidad del estatus del sistema 2. Conexión entre el sistema y el mundo real 3. Control y libertad por parte del usuario 4. Consistencia y estándares 5. Prevenir errores 6. Reconocer sobre memorizar 7. Flexibilidad y eficiencia en el uso 8. Estética y diseño minimalista 9. Ayudar a reconocer errores, aprender y recuperarse de ellos 10. Ayuda y documentación [ Nielsen, 1995]

Así como estos principios se pueden extender más allá de un sitio web para ser aplicados incluso en aparatos u objetos, también el esquema en el que Jessee James Garrett explica los elementos de experiencia del usuario de un sitio web, también son aplicables al diseñar cualquier producto visual interactivo. En este se explica que primero se deben considerar las necesidades del usuario y los objetivos del producto (lo que quiere transmitir u obtener), para conciliar ambos y entonces establecer el contenido y funcionalidad. De ellos se podrá inducir la arquitectura de información y diseño de interacción y posteriormente el diseño de información, que se compone del diseño de interfase y de navegación. El resultado de la conjugación de todos estos elementos tiene su culminación en la integración del duseño visual, donde ya entran paletas de color, tipografías y otros elementos. [Garrett, 2000].

El esquema de Jessee James Garrett explica lo que hay detrás del diseño visual. [Garrett, 2000].

Wireframes y Pruebas Las ideas de la investigación previa se transforman primero en bocetos y wireframes de baja fidelidad que organicen los contenidos y la navegación a través de ellos, considerando los conceptos revisados. Durante una charla que ofreció en el Día de la Usabilidad 2013 en la Universidad Autónoma de Nuevo León, Natalia Vivas, consultora en usabilidad y experiencia de usuario, recomiendó que desde esta fase se empiecen a hacer pruebas con los usuarios, pues entre más pronto se encuentren los errores, más pronto se corregirán y esto ahorraría mucho tiempo, esfuerzo y costos. [Vivas, 2013]. Vivas recomienda que una vez que estos wireframes sean perfectamente entendibles para los usuarios, entonces se puede proceder a trabajar en el diseño visual. Después de trabajar los prototipos en algún equipo de diseño como Adobe PhotoShop o Illustrator, también se recomienda hacer test con usuarios, antes de declarar que las pantallas modelo están listas para ser entregadas.

Entre más pronto se hagan pruebas con los usuarios, mejor. [Vivas, 2013].

MĂŠtodo de Trabajo

A grandes rasgos, la metodología que se siguió fue una parte de la que contemplan Javier Cuello y José Vittone en “Diseñando apps para móviles”. Esta incluye: Conceptualización, Definición, Diseño, Desarrollo y Publicación. Sin embargo, específicamente para este proyecto se efectuaron las fases iniciales hasta llegar a la parte del Diseño, dejando fuera Desarrollo y Publicación.

Entrevistas En la primera parte, que contempla la Conceptualización, se investigó la idea de la cuál nace la aplicación y las necesidades que necesitan ser cubiertas. Para ello se hizo uso de las herramientas que recomiendan Russ Unger y Carolyn Chandler en “A proyect guide to UX design”, tales como entrevista al usuario y consulta contextual. Tres de éstas se llevaron a cabo previo al diseño de los primeros wireframes y otra técnica después de ello. Se trata primeramente de entrevistas individuales y entrevista contextual, así como posteriormente pruebas de usabilidad. Con el fin de conocer las características que ayudarían a conformar el perfil de “personas”, se realizaron las entrevistas individuales con tres personas de la empresa en cuestión. Para mencionar este concepto, hay que recordar que Unger y Chandler describen una entrevista como una conversación uno a uno con alguno de los participantes que pertenecen a uno de los grupos primarios del sitio o aplicación que se esté diseñando. Las entrevistas individuales permiten conocer las creencias, actitudes, deseos y experiencias de la otra persona para tener una mejor comprensión acerca de los usuarios. También se les puede pedir que evalúen los contenidos del sitio o aplicación que se esté diseñando. [Usability.gov] En el caso de las entrevistas contextuales, el investigador observa y escucha al usuario trabajar en su propio ambiente, de la manera que normalmente lo haría. Son usualmente mucho menos formales (pues también el investigador debe estar abierto a conocer una rutina que no conoce), pero también pueden conducirse. [Usability.gov] Lo más importante que se obtiene de este tipo de entrevistas es que se conocen cuestiones que el entrevistado pudiera no decir directamente, tales como: Los problemas que enfrente en el momento, el contexto y equipo con el que trabaja, cómo es el espacio, y cuánto tiempo les toma llevar a cabo una tarea. [Usability.gov] A continuación se muestra en la figura la metodología que se siguió para realizar el proceso de entrevistas. Diseño de Entrevistas

Aplicación de Entrevistas

Diseño de Entrevista Contextual

Aplicación de Entrevista Contextual

Recopilación de la información

Síntesis de Hallazgos

En la siguiente figura se muestra la metodología para utilizar la información recabada hasta llegar al diseño del prototipo.

“Personas”

Mapa de Experiencia

Wireframes

Pruebas

Rediseño

Prototipo

Diseño de las Entrevistas La primera de las personas entrevistadas fue el anterior dueño de la empresa, que como se mencionó previamente, se trata de un negocio familiar. El Ingeniero Miguel Ángel Martínez Chapa es quien ha estado a cargo de la contratación del personal a lo largo de unos 15 años, por lo que podría ayudar a definir los perfiles (“personas”) de quienes pudieran ocupar el cargo de ingenieros de servicio, y por tanto, utilizar la aplicación. Previo a la entrevista con el Ing. Martínez Chapa se concretaron los siguientes temas a manera de guía: Tema

Justificación

Antecedentes del puesto

Conocer el contexto histórico en el que se han desempeñado las actividades y comparar los elementos que permanecen a través del tiempo y de las diferentes personas que la efectúan.

Requerimientos para el puesto

Identificar puntos clave en las funciones de la aplicación.

Conocimientos o habilidades del ingeniero técnico de servicio

Definir los rasgos que conformarían el perfil de “personas”, el posible usuario de la aplicación.

Fuerzas y Oportunidades

Identificar fases o etapas prioritarias.

Cuestionario Recordando, el proyecto consiste en diseñar una aplicación para un dispositivo móvil para que la utilice el ingeniero técnico de servicio al hacer sus visitas rutinarias con los clientes para revisar sus equipos. Se trata de una parte de las actividades que actualmente realiza el Ing. Jorge Martínez González. o ¿Cómo se hacía esta actividad anteriormente? o ¿Qué se necesita para cubrir el puesto? o ¿Qué conocimientos o habilidades en especial son deseables? o Suponiendo que se agregara nuevo personal para ese puesto ¿Cómo sería el ideal?¿Qué dirían las especificaciones de la vacante? o ¿Cuáles son sus puntos más fuertes y débiles para la realización del trabajo?

La segunda entrevista fue el gerente de operación, el Ingeniero Andrés Martínez Correa. Su opinión resulta muy importante para concretar las funcionalidades de la aplicación, pues el objetivo principal de ésta es agilizar el flujo de trabajo de un determinado puesto, el cuál le reporta al Ing. Martínez Correa. Es por ello que él tiene un factor de decisión muy importante en cuanto al tipo de información que necesita recibir y qué cuestiones son las más importantes. Para la entrevista con el Ing. Martínez Correa, se consideraron los siguientes temas a discutir: Tema

Justificación

Propósito de las visitas al cliente

Corroborar funcionalidades de la aplicación

Contenido y contexto de la visita

Conocer acerca del medio en el que se usaría la aplicación

Información más importante Identificar puntos clave Tiempos de procedimientos Tener una referencia de comparación para mejora de procesos

Cuestionario o o o o o

¿Qué es lo que se busca obtener de las visitas rutinarias al cliente? ¿En qué consiste una visita de monitoreo? ¿Cuál es la información más importante? ¿Cuánto tiempo suele pasar desde la visita hasta el reporte final de la información? ¿Cuánto tiempo se toma para el procesamiento de datos?

Finalmente, se realizó una entrevista al Ingeniero Jorge Martínez González, quien es actualmente el ingeniero de servicio encargado de monitorear los equipos de las empresas clientes. En esta entrevista se analizó su punto de vista como trabajador de Quimicalderas, pero también como usuario de la aplicación antes de realizar la entrevista contextual, para irse adentrando en el tema y saber en qué cuestiones fijarse más detalladamente al momento de la visita en campo. Considerando que el Ingeniero Martínez González sería el usuario final de la aplicación a diseñar, se realizó una entrevista con él desde este punto de vista. La conversación se basó en los siguientes temas:

Tema

Justificación

Uso personal de smartphone

Comprender el nivel de habilidad en manejo de dispositivos móviles.

Uso personal de aplicaciones

Conocer el nivel de habilidad en uso de aplicaciones móviles.

Uso personal de iOS y Android

Conocer el historial de uso de diferentes sistemas operativos móviles.

Cuidados del dispositivo

Comprender el contexto físico en el que se usaría la aplicación.

Visita al cuarto de máquinas de un cliente

Concretar las actividades a realizar, sus lugares y sus tiempos.

Reporte de actividad

Conocer el procedimiento por el cual el cliente se entera de cómo realizó el servicio.

Opinión del trabajo que realiza

Generar ideas sobre posibles funcionalidades de la aplicación e incentivar al usuario a dar retroalimentación o ideas.

Información que maneja

Concretar los puntos más importantes.

Cuestionario o ¿Cómo “te llevas” con tu celular? o ¿Usas algunas aplicaciones o sólo llamadas? o ¿Has usado Android? o ¿Lo usas en los lugares de trabajo? o ¿lo cuidas de alguna manera especial? o Describe una visita al cuarto de máquinas de un cliente. o ¿Cómo se reporta al cliente acerca de la visita? o ¿Qué crees que haría más fácil tu trabajo? o ¿Qué te parecería una aplicación en tu celular (o en otro de la empresa) que sirviera para capturar, guardar y enviar la información que necesites a una base de datos o por mail? o ¿Cuál sería esa información que necesites? o ¿Qué más te gustaría que hiciera o que tuviera?

Resumen de Hallazgos Lo más importante que resultó de entrevistar a las diferentes personas de la empresa fue que: o El puesto lo puede ocupar alguien con escolaridad de preparatoria, idealmente jóvenes de 20 a 25 años y puede su experiencia en aplicaciones móviles sea básica. o La aplicación debe medir y asegurar al efectividad de cada visita al cliente, ser clara en el manejo de información y de bajo costo para su mejor implementación. o La aplicación debe evitar que se capturen dos veces los datos, al enviar la información para poder verla en una computadora de escritorio. o Es de suma importancia la retroalimentación que la aplicación le dará al usuario al ingresar los datos de cada parámetro, más allá de ser una herramienta de captura, es una herramienta para llevar a cabo acciones concretas de mantenimiento a los equipos. Detalles de los Hallazgos Entrevista 1: Ing. Miguel Ángel Martínez Chapa. Director.: o La actividad a realizar es, a grandes rasgos, revisar los equipos y ver que todo funcione bien. Para ello, se requiere tomar muestras, hacer análisis y formar un reporte con resultados y comentarios o consejos. o Esto actualmente se realiza a mano en un bloque de notas y un formato impreso para llenar a mano y entregar la hoja al cliente. o Por lo regular es el Ingeniero Jorge Martínez González quien se encarga de llevar esto a cabo, pero en caso de ser necesario, puede otro miembro del staff asumir la responsabilidad. Para ello, habría de conocer los detalles técnicos (dónde está el cuarto de máquinas, cómo tomar la muestra, cómo hacer el análisis…) y llenar el mismo formato impreso, así como leer los últimos reportes realizados, para saber si había algún pendiente o consideración especial con el equipo. o En cuanto a la persona que pudiera tomar el puesto, destacó que no tiene tanta relevancia el grado de escolaridad como pudiera pensarse, ya que se trata de actividades que fácilmente pueden ser aprendidas. Idealmente se trataría de un químico, pero puede tratarse de un egresado de técnico en química o una persona con preparatoria trunca. o Para desempeñarse en este puesto es de mucha importancia que la persona se enfoque en resolver el problema que pudiera tener el cliente en sus equipos, a través de la toma de decisiones ante las diferentes situaciones que se pudieran presentar.

Entrevista 2: Ing. Andrés Gerardo Martínez Correa. Gerente de Operación. Lo más relevante que indicó el Ing. Martínez Correa fue que el uso de la aplicación en el dispositivo móvil dentro del cuarto de máquinas no pretende disminuir el tiempo que actualmente toma ese proceso, sino que busca maximizar la calidad de la visita, que se transforme en acciones y resultados contundentes que el cliente pueda apreciar y que el resto del equipo de Quimicalderas pueda conocer y tener a la mano. Lo principal que se busca lograr con la aplicación es: o Medir y asegurar la efectividad de la visita, a través de registrar acciones y resultados. o Rastreabilidad: el poder consultar un historial de los datos de cada visita. o Claridad: Presentar la información en manera gráfica, a través de semáforos, tablas, gráficas, etc. o Disponibilidad: Consulta de los datos a través de la web, reportes automatizados vía e-mail, etcétera. o Profesionalismo: Mostrar una diferenciación ante la competencia a través de una excelente presentación y uso de herramientas tecnológicas que impliquen el profesionalismo que se busca como parte de la imagen corporativa. Específicamente en capacidades de la aplicación, interesa que el dispositivo alerte sobre los diferentes recordatorios, así como de las acciones a realizar en caso de que los parámetros de un equipo se encuentren fuera de rango. También se pidió que, adicional a los parámetros de cada equipo, la aplicación tuviera un campo de captura para escribir comentarios. Además, los requisitos que se le impusieron al diseño de la app son: o Bajo costo: Por el elevado costo que se estima para la programación de la aplicación, no se aprobó la adquisición del equipo Scanphone Honeywell que se había propuesto. o Fácil implementación: Se indicó que se diseñara para sistema operativo Android, ya que es el que cuenta con más modelos de hardware disponibles a bajo costo. o Escalabilidad: Por el momento existe una sola persona en el puesto, pero considerando un futuro en el que haya más, se busca la facilidad para instalar la app en más aparatos. o Fácil actualización: Se busca que sea fácil agregar o editar tanto los clientes como los equipos con los que cuentan. Debe haber un master que administre el contenido, pero de ser posible se buscaría que se pueda pasar esa facultad a alguien más.

Incluso se habló de que para un futuro sería ideal que la aplicación fuera adoptable por el cliente, de manera que lo pudiera hacer él mismo (a través de sus propios operadores) y que se reciba en la base de datos “quién” o “desde dónde” llegó esa información. En la parte técnica del contenido, se analizó una tabla con los parámetros a revisar en cada equipo, así como los rangos aceptables para cada uno. Entrevista 3: Ing. Jorge Alberto Martínez González. Ingeniero Mecánico de Servicio. o Ya tiene manejo de iOS en su teléfono personal, así como Android en el celular que utiliza para trabajar. Optó por no llevar su iPhone al área de trabajo. En su lugar, utiliza un teléfono HTC que le fue proporcionado por la empresa. o Anteriormente, la forma usual en la que el ingeniero cuidaba su dispositivo móvil era simplemente dejarlo en casa o en la camioneta y no ingresarlo al área de trabajo. o En cuanto a su actividad, resaltó que el reporte que se entrega al cliente se realiza hasta terminar el mes, luego de haber promediado los datos las visitas de cada mes. o Sobre el prototipo de aplicación como herramienta para su trabajo, indicó que no solamente se disminuiría el tiempo que actualmente toma dar este reporte, sino que también facilitaría su trabajo, ya que la información se capturaría solamente una vez, y no las dos veces que implica el proceso actual (una vez a mano y luego transcribirlo a la computadora). o Otro beneficio resaltado fue el que sería resultante de enterar a los demás elementos de Quimicalderas acerca del estatus de los diferentes equipos de los clientes, así como de las estadísticas acerca del consumo de productos en cada uno de ellos, lo que podría incluso retroalimentar la fórmula de los productos. o Le resultaría muy importante recibir “qué significa ese número”, es decir, las medidas correctivas necesarias para regresar el parámetro a la normalidad. o Sugirió la funcionalidad de poder agregar comentarios libremente, como el inventario de la cantidad de producto que se deja almacenado en cada cuarto de máquinas. Entrevista Contextual Ing. Jorge Alberto Martínez González. Ingeniero Mecánico de Servicio. Se llevó a cabo en las instalaciones de uno de los clientes actuales de Quimicalderas, el cual cuenta con una póliza de servicio que abarca las visitas regulares para toma de muestra y suministro de productos químicos. Para la visita, el ingeniero lleva consigo un maletín de herramientas en el que guarda reactivos químicos, un contenedor plástico para hacer análisis, aparatos medidores de bolsillo, su libreta y una pluma.

Se conoció de cerca el trabajo realizado por el usuario. 1- Llega al cuarto de máquinas y abre la llave del agua para tomar la muestra de la caldera y también del suavizador. 2- Luego, en un pequeño espacio que utiliza como mesa, usa los materiales que lleva para medir los diferentes parámetros del agua y los va apuntando a mano en la libreta. 3- Posteriormente, toma una jarra de acero inoxidable que tenía en el cuarto de máquinas y la usa para agregar producto químico (que también toma de unos porrones que ya había llevado previamente al lugar) a los equipos. Como resultado de esta entrevista/observación se obtuvo que: o Hay mucho ruido en el cuarto de máquinas, por lo que no tendrían sentido los sonidos de feedback en la aplicación. o Es posible que durante el proceso el ingeniero tenga las manos un poco mojadas. No es mucho, pues se seca en la ropa de mezclilla, y en general es factible usar la libreta de papel, pero sería buena idea proteger el dispositivo móvil con una funda resistente. o Se encontró que no hay un espacio como una mesa de trabajo destinada a los análisis, por lo que el uso de la libreta queda algo incómodo y el del dispositivo móvil resultaría ventajoso, pues no necesita apoyar y sólo se necesita una mano. o La observación más importante es que en caso de haber algo inusual en el cuarto de máquinas, el ingeniero saque su celular para tomar una foto y posteriormente comentarlo en la oficina. El apuntar esta información que no tenía contemplada encontró una mejor solución en una fotografía, no tanto en una nota de texto.

Personas

“Diseña para gente, no para listas de características” [Li, 2013]. Al momento de diseñar un sitio web o una aplicación, es importante hacerlo para quienes lo van a usar: es decir, para esas personas.Y es precisamente ese término el que se utiliza en la metodología de diseño centrado en el usuario. Es la voz del usuario, que surge de sintetizar la investigación en patrones, metas, atributos y preocupaciones. [Li, 2013]. En el caso del usuario de esta aplicación, se definieron las siguientes “personas”:

Nombre: Antonio González Reyes. Edad: 25 años. Ciudad: San Nicolás. Estudios: Carrera técnica de mantenimiento mecánico. Experiencia con tecnología Nivel de Conocimiento : Intermedio Navegador : Internet Explorer 9.0 Conexión : 3 mbps Computadora : de escritorio, con Windows 7 Tiempo en línea : 1.5 horas al día Sitios más utilizados : www.facebook.com, www.youtube.com Celular : LG Optimus L3 con Android 2.3 Aplicaciones en celular : Whatsapp, Facebook, juegos, música Día a día anda para todos lados en camión escuchando música en su celular LG. Es smartphone pero no tiene plan de datos, sino que lo usa con wi-fi cuando está al alcance, y las redes sociales cuando Telcel tiene en promoción el uso de redes sociales al hacer una recarga de $200. Objetivos:Le interesa trabajar de lleno y tener un empleo confiable. Cualidades: Es tranquilo y responsable con los compromisos que hace.

Nombre: Raúl Guevara García. Edad: 45 años. Ciudad: Escobedo. Estudios: Preparatoria trunca Experiencia con tecnología Nivel de Conocimiento : Intermedio Navegador : Internet Explorer 9.0 Conexión : 5 mbps Computadora : de escritorio, con Windows 7 Tiempo en línea : 1 hora al día Sitios más utilizados : www.google.com, www.youtube.com, www.podio.com Celular : LG Optimus L3 con Android 2.3 Aplicaciones en celular : Cámara, notas Día a día trabaja desde temprano. Llega a la oficina y de ahí se va a las vueltas del día, recorre muchos kilómetros y habla con varia gente. Toma fotos y videos de lo que le llama la atención y alrededor de las 5pm llega de nuevo a la oficina. Ahí se va a su cubículo, prende su computadora y actualiza sus actividades en Podio, el sistema/red social que utiliza en el trabajo. Analiza sus apuntes y enseña a sus jefes y compañeros las fotos y video de los temas que quiere discutir. Luego se va a su casa, ve a su esposa y en la noche se pone a navegar en Internet sobre temas que le interesen, pero en general siempre son de su trabajo porque le interesa. Objetivos: Quiere que sus hijos se gradúen de la UANL. Por lo mismo que no terminó sus estudios, le interesa dejar en claro que si es capaz de hacer su trabajo y que es el mejor en lo que hace. Cualidades: Tiene muy firmes sus valores personales y familiares y es una persona muy comprometida, responsable, proactiva y confiable.

Mapa de Experiencia Hacer un mapa de experiencia es muy importante, pues por un lado se tiene que un sitio o aplicación que crea su estructura basándose en satisfacer las necesidades del usuario le da un gran valor a la empresa en general, pero también porque es una gran herramienta para estructurar la arquitectura de la información de manera que realmente funcione. Por lo tanto, se utilizaron los resultados que se concluyeron de las diferentes entrevistas para estructurar el siguiente journey map: Escenario: Miércoles, 8:30 am.Toño está listo para empezar el día.Toma sus herramientas de siempre: lo necesario para hacer mediciones a las muestras de agua y su dispositivo para abrir la aplicación móvil. Al capturar el dato del pH, la aplicación le indica que está muy alcalino y que debe agregar ácido. Sin embargo, se da cuenta que ya no tiene stock de ácido, por lo que toma la sugerencia de la aplicación sobre programar un recordatorio.

FASE

Inicio de Jornada

Capturar Datos

Imprevistos

Hacer las mediciones y capturar la información De ser necesario, tomar acciones. (30 min)

OBJETIVO

Cliente

Pues apunto los demás Continúa datos capturando

Ingresar Datos

Equipo

ACCIONES

Ir a Refinería

Aviso: Alcalino

A ver qué tal anda la caldera

¡ Oops !

Analiza el agua Mmm... Esto se ve algo raro...

ESTADO DE ÁNIMO

Tranquilo, dispuesto

Touch point

Curioso, intrigado

Moment of truth

Confirmar Datos

Nuevo Recordatorio

Co nfi Da rma tos r

APP Empecemos...

Establecer un recordatorio (1 min)

Aviso: Alcalino

¡Para mañana mismo!

No fue lo ideal, pero ya quedó

Si ya se, pero ya no hay ácido... Deja pongo un recordatorio

Busca el ácido pero se da cuenta de que ya no hay Hijole, voy a tener que dejarlo pendiente Frustrado

Pensamiento del usuario

Animoso

Arquitectura de Información Además de las secciones que se utilizaron para ejemplificar el mapa de experiencia, la aplicación incluye otras. La información se organiza de tal manera que desde cualquier sección de la app se puede acceder, a través del menú y de la Action Bar, a la lista de clientes, nota nueva, recordatorio nuevo, historial, notas, recordatorios y salir. Por otro lado, el “camino” secuencial de pantallas es el de la captura de los parámetros; primero hay que elegir el cliente y de cuál de sus equipos se trata. Esta navegación se explica a través del siguiente diagrama:

Diseño

En un inicio, se había propuesto una arquitectura de información en la que se consideraba una pantalla de “Nueva VIsita” para capturar los datos de un equipo cuando se realizara una visita de monitoreo. Entonces, se comenzó por bocetar una serie de mockups a mano alzada en papel y lápiz que fueran de acuerdo a ella.

Posteriormente se llevaron estas ideas a la pantalla utilizando la herramienta en lĂnea moqups, la cual permite dibujar fĂĄcilmente los wireframes directamente en el sitio web para posteriormente poder compartirlos mediante una liga.

La herramienta moqups permite pasar en limpio los wireframes de baja fidelidad

Wireframes de baja fidelidad de la arquitectura de información inicial. Al hacer pruebas con estos wireframes, se encontraron áreas de mejora. Se recibió la retroalimentación de que el ver los resultados de la última medición era de muy poca importancia, casi nula comparada con la importancia de capturar los datos nuevos, lo cual estaba “después” en la navegación.

Aunque las observaciones del usuario fueron básicamente cambiar el orden de las pantallas de historial y captura, al volver a bocetar se fueron encontrando más mejoras, que incluso llevaron a replantear la arquitectura de información.

Bocetos del rediseño, con la arquitectura de información definitiva.

Posteriormente se hizo el diseño de las pantallas específicas en el tamaño real de la pantalla del dispositivo, haciendo uso de designkits de Android y el paquete de software creativo de Adobe CS5. Específicamente, se trabajaron los pictogramas en Adobe Illustrator CS5. Para ello, se tomó en cuenta que en los instructivos, diagramas y otros dibujos técnicos ya existe un pictograma que representa a la caldera. Este consiste solamente en un rectángulo horizontal de esquinas redondeadas con dos trapecios en la parte inferior. De esta manera, se trabajó en diseñar pictogramas equivalentes para los suavizadores y torres de enfriamiento. Para el caso de los iconos de las funciones en la aplicación, se modificaron los ya existentes que facilita Android como “Action Bar Icons” en el micrositio dedicado a desarrolladores. [Android Open Source Project].

Para la elaboración de los íconos se tomó en cuenta el estilo plano de Android.

Torre de Enfriamiento (izq.) y Suavizador (der.)

El diseño general de la aplicación se realizó en Adobe PhotoShop CS5. Aquí se trabajó una combinación de un grid de 12 columnas, así como separaciones en múltiplos de 16 pixeles, manteniendo la altura que marca Android para la Status bar y Action bar, así como el espacio mínimo entre elementos.

Uso de grids

El diseño de las interfases se realizó en Adobe PhotoShop CS5 y los archivos de las imágenes se subieron a InVisionApp.com.

Al terminar los wireframes se hizo uso de la herramienta InVisionApp, la cual se mencionó anteriormente. Para ello, se creó una cuenta y se cargaron los archivos en formato .png. Posteriormente se crearon los mapas de hipervínculos, indicando qué área clickeable llevaría a cuál otra pantalla.

La herramienta en línea InVisionApp permite ligar las imágenes entre sí mediante mapas de hipervínculos, donde el diseñador indica las áreas sensibles que desea.

Finalmente, se obtuvo la liga con la cual se puede acceder a la vista previa e interactuar con el prototipo de manera similar a como se usaría la aplicación (sin ver las áreas clickeables). La liga es la siguiente: http://invis.io/BXSBV0HZ También se puede acceder por medio del siguiente código QR.

Prototipo de Aplicaci贸n

Contenido

Al iniciar la aplicación, hay una pantalla donde se captura un nombre de usuario y contraseña que le permiten ver la pantalla inicial. En ella se muestra una lista con los clientes que maneja el usuario, de manera que ahí selecciona el cliente al cual realiza la visita de revisión. Al seleccionar el cliente, se muestra el nombre y una imagen de la empresa cliente, así como los equipos con los que cuente, por ejemplo: Caldera 1, Caldera 2, Torre 1, Torre 2, etcétera. Allí, el usuario debe seleccionar el equipo que va a revisar, y al hacerlo, aparecen los parámetros que han de revisarse. Esta pantalla con los parámetros en específico es un formulario, por lo que aparece el teclado numérico con el cual el usuario captura los valores que allí se le piden. Cada vez que ingresa un dato, presiona la tecla “Siguiente” o “Next”, con lo que va avanzando en el formulario. Al terminar el formulario aparece una sección con el resumen de los datos capturados para que el usuario los revise y confirme. Al hacer esto, la aplicación avanza a la pantalla de captura del siguiente equipo del mismo cliente. Es decir, al confirmar los datos capturados de Caldera 1, seguirá la pantalla de captura de Caldera 2 y así sucesivamente hasta terminar los equipos de ese cliente. En el menú de estilo Android Navigation Drawer, presente en cada pantalla, aparecen las siguientes opciones: Clientes, Equipos, Notas, Recordatorios, Historial y Salir. En la sección de Notas se reúnen las anotaciones que haya hecho el usuario respecto a cualquier tema, con la opción de agregar una foto o video, así como enviarlas por correo. En la opción de Recordatorios se agregan y administran las diversas alertas que quiera programar el usuario, ya sea de repetición periódica u ocasión única. La pantalla sería similar a la interfaz usual de smartphone en la que se administran las alarmas: es decir, una lista de alarmas que se pueden editar y especificar nombre (ej. “Purgar Caldera 2”), así como frecuencia y hora. Estos recordatorios activarían notificaciones de tipo push que se activarían independientemente de si el dispositivo se encuentra usando la aplicación o no. En la pantalla de Historial se muestran sencillas gráficas que indican los valores anteriores que se han presentado en determinado equipo.

Propuesta GrĂĄfica

Lista de clientes: Con nombre, fotografĂa y logotipo.

Cliente: Con los equipos que tenga, identificados por pictograma y texto.

Equipo: Muestra la lista de par谩metros que se revisan en ese equipo.

Aviso: En caso de ingresar un dato fuera de rango, describe la medida correctiva.

Confirmar: Al final del formulario se encuentra el bot贸n para confirmar.

Fuera de rango: Indica que es necesario programar recordatorio y redactar nota.

Nuevo recordatorio: Captura datos como fecha, repetici贸n, hora, texto y sonido.

Date picker: Se mantiene el estilo de Android para elegir fecha y hora.

Pantalla de confirmar: Resumen de datos.

Reporte enviado: Aviso temporal a manera de toast.

Recordatorios: Lista de las alarmas programadas. El icono indica repetición.

Notas: Lista con título, previsualización, cliente sobre el que trata y su logotipo.

Nueva Nota: Seleccionar el cliente o si es tema general, elegir “Quimicalderas”.

Equipos:Tabs con las listas de equipos de cada cliente, por tipo de máquina.

Historial: Gráficas de las últimas mediciones de determinado equipo.

Menú transversal: Al estar en un cliente o equipo se puede navegar directo a otros.

Navigation Drawer Menu: En todo momento está disponible el menú.

Conclusiones

Anteriormente ya había hecho diseños para ser desplegados en pantalla, pero diseñar una aplicación móvil resulta diferente a un sitio web, pues se debe hacer mucho mayor labor de síntesis: no hay tanto espacio para todo lo que se quiere comunicar ni tantos elementos para transmitir una imagen corporativa. Al crear una aplicación para cierto sistema operativo se tiene que el formato no es tan ilimitado como en los sitios enteros, pues los usuarios están acostumbrados a ciertos elementos e incluso “gestos” comunes al sistema operativo. En este caso se diseñó específicamente para Android, pero habría sido diferente realizar el diseño, por ejemplo, para iOS. Ambos alientan a que se diseñen y programen aplicaciones para sus usuarios, y ambos coinciden en que dan mucha importancia no sólo a los aspectos meticulosos de medidas, grids y estilo visual, sino que antes que nada enfatizan en transmitir sus filosofías. En este trabajo se presentaron las ideas que Android remarca en su micrositio Developer.android.com, pero Apple también tiene su equivalente en Developer. apple.com. Incluso, me llamó la atención que Josh Clark dedica todo un capítulo de su libro “Tapworthy: Designing Great iPhone Apps” a la filosofía WWJD: What Would Jobs Do? [Clark, 2010]. En cuanto a cuestiones más específicas, así como cambia mucho el diseño con una retícula editorial a una retícula web, también cambia mucho entre un grid para un sitio y para una aplicación. Me imagino que igualmente es un cambio de paradigma aún mayor el hacer un diseño responsivo, pues aunque este proyecto es específico para un tipo de dispositivo, en los proyectos dirigidos al público en general o a una audiencia mayor deben considerar una infinidad de tamaños de pantalla. Pensar en esto me alienta a seguir trabajando en el tema y me inspira a hacer nuevos proyectos. También, el hecho de haber conocido la gran gama de herramientas que existen, como por ejemplo la que utilicé para prototipar mis diseños (InVisionApp) me resulta fascinante. En cuanto al método de trabajo que seguí, encontré especialmente útil no sólo una técnica, sino la combinación de elaboración de wireframes y entrevistas, a manera de prueba con el usuario. Al recibir esta retroalimentación me encontré con avances significativos que quizá no habría notado yo sola, y sobre todo sirve para recordar que no se diseña para uno mismo.

En otros trabajos que hecho de diseño web, yo misma escribo el código para que el diseño funcione y lo subo a servidor para que se despliegue en pantalla. El conocer InVision me dio a conocer que se puede hacer una previsualización de la navegación entre secciones sin tener que programar. Esto acelera el trabajo de diseño y sin duda será una herramienta valiosa al formar parte de un equipo más grande. En cuanto a aprendizajes específicamente de este proyecto, encontré que esta aplicación puede ser un gran incentivo para el trabajador: porque hace más eficiente el manejo de herramientas modernas, porque da profesionalismo, porque se aprenden cosas nuevas, porque facilita la rutina de trabajo. Corroboré también que el obvio no existe: que no basta con observar, hay que investigar lo más que el tiempo y presupuesto permitan. Hay que hacer entrevistas primero y pruebas después de diseñar. Pero los aprendizajes más trascendentales vienen de recordar que la esencia del diseño es observar el mundo para encontrar maneras de hacerlo mejor. No sólo estéticamente, sino en funcionalidad. En la era de la información esto también aplica, pues la funcionalidad de la información consiste en la forma en la que es comunicada: cómo se da, cómo se procesa, cómo se recibe. Cada vez es más obvio que esto implica máquinas, ya sea que las personas interactúen con dispositivos, o con otras personas a través de los dispositivos. En este caso, el diseño entra a definir las formas de interacción con las máquinas, la forma en que se organiza la información, los elementos visuales que guiarán al usuario para lograr su objetivo. Por esto (y muchas otras razones) el mundo creativo no está distante del mundo industrial. De hecho, no deberían considerarse “mundos” diferentes, pero así es como se ha mantenido el paradigma que contrapone estas dos grandes áreas. Ingenieros vs. Licenciados, Cálculos vs. Colores, “Cuadrados” vs. Creativos… Lo que más me queda de este proyecto es que es verdad que ambas áreas son diferentes (quizá hasta podrían considerarse opuestas) pero eso no se traduce en ese versus. No se trata de “contra” sino de colaboración. Lo que afortunadamente pude comprobar es que ambas piezas son del mismo rompecabezas, que somos parte de un mismo equipo y que se ha roto el paradigma de que la mejora de procesos es exclusiva de un ingeniero industrial.

Bibliografía

o Android. Micrositio dedicado a desarrolladores de aplicaciones para Android. http://developer.android.com o Apple. Micrositio dedicado a desarrolladores de aplicaciones para iOS. http://developer.apple.com o Cuello, Javier.Vittone, José. “Diseñando apps para móviles”, 2013. ISBN (PDF): 978-84-616-5070-5. Disponible en: www.appdesignbook.com o 2010.

Clark, Josh. “Tapworthy: Designing Great iPhone Apps” O’Reilly Media,

o Flynn, Daniel. “The Nalco Water Handbook” Tercera Edición, 2009. Mc Graw Hill, Estados Unidos. o Garrett, Jessee James. “The Elements of User Experience”. 2000. http:// www.jjg.net/elements/pdf/elements.pdf o Hasso Plattner Institute of Design at Stanford. “Bootcamp Bootleg” 2011. Disponible en: http://dschool.stanford.edu/wp-content/uploads/2011/03/ BootcampBootleg2010v2SLIM.pdf o Hobbs, Jason. “An introduction to user journeys”. Boxes and Arrows, 2005. Consultado el 30 de enero 2014 y disponible en: http://boxesandarrows. com/an-introduction-to-user-journeys/ o Howard Bear, Jacqueline. “Grids: Flexible Options”. About.com Desktop Publishing. http://desktoppub.about.com/od/grids/l/aa_gridsflex.htm o

InVision, herramienta para prototipado. http://invisionapp.com

Kraft, Christian. “User experience innovation”, 2012. Apress.

o Li, Amy. “Designing with the user in mind” Bay Area Video Coalition. (2013). Consultado el 30 de enero 2014 y disponible en: http://bavc.org/ designing_with_the_user_in_mind o Moqups. Herramienta para elaboración y presentación de wireframes de baja fidelidad en línea. http://moqups.com o Port, Robert. Herro, Harvey. “The Nalco Guide to Boiler Failure Analysis” 1991. Mc Graw Hill, Estados Unidos.

o Quimicalderas, S.A. de C.V. “Empresa”, sección del sitio web 2014. http://www.quimicalderas.com/empresa.html o Selmec Equipos Industriales S.A. de C.V. “Manual Selmec de Calderas” Séptima Edición, 1997. México. o

Smith, Nathan. 960 Grid System http://960.gs

o Smith, Nathan. 960 Grid System http://sonspring.com/journal/960-gridsystem o Tassi, Roberta. “Tool: Customer journey map”. Service Design Tools, 2009. Consultado el 30 de enero 2014 y disponible en: http://www. servicedesigntools.org/tools/8 o Tincher, Jim. “Creating a Customer-Focused Customer Experience Journey Map” Heart of the Customer. Consultado el 16 de febrero 2014 y disponible en: http://www.heartofthecustomer.com/wp-content/ uploads/2013/05/Creating-a-Customer-Focused-Customer-Experience-MapWhite-Paper1.pdf o Unger, Ross. Chandler, Carolyn. “A Project guide to UX design”, 2009. New Riders, Pearson Education. o U.S. Department of Health & Human Services. “Contextual Interview” Usability.gov .Improving the User Experience. Disponible en: http://www. usability.gov/how-to-and-tools/methods/contextual-interview.html o U.S. Department of Health & Human Services. “Individual Interview” Usability.gov .Improving the User Experience. Disponible en: http://www. usability.gov/how-to-and-tools/methods/individual-interviews.html