Hacer que su aplicación tenga un aspecto fabuloso

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Comprender por qué el diseño de la superficie de su aplicación es el último paso del proceso.
  
• Conocer los elementos de la superficie de una aplicación.
  
• Revisar los problemas de la superficie de la aplicación de ejemplo The Motivator y arreglar algunos de ellos.
  
• Ver la aplicación definitiva tras pulir su estilo.
  

Los últimos serán los primeros

Como dijimos al inicio, es fácil comenzar creando elementos de aplicación y tablero con un aspecto fabuloso. Analytics Studio le ofrece multitud de formas para desarrollar exploraciones, seleccionar tipos de gráfico de aspecto sofisticado, ajustar el tamaño y la posición de los widgets del tablero, cambiar el tamaño y los colores de las fuentes, etc.

Como también vimos, los gráficos de mejor aspecto no ayudan a la audiencia hasta que no se desarrollan en el contexto apropiado. ¿Qué queremos decir cuando hablamos de contexto? Se trata del propósito y las ideas de funcionalidades para su aplicación y su estructura planificada.

Ya determinamos esas partes en The Motivator. Ahora es el momento de pulir su estilo: vamos a hacer que la superficie de la aplicación muestre su mejor cara basándose en sus elementos subyacentes. Aunque no trabaje en este aspecto hasta el final del proceso, esta es la parte de la aplicación que sus usuarios ven primero. Más vale que la haga destacar para que su audiencia quiera usar todas esas funcionalidades a las que dedicó tanto esfuerzo.

Creación de un aspecto visual atractivo

Ahora es el momento de pensar detenidamente sobre cuál es el aspecto de una aplicación. Aquí es donde debe aplicar sus propios juicios estéticos para crear un aspecto visual atractivo, lo que a su vez puede aumentar el vínculo emocional de los usuarios con su aplicación. Estos son los elementos que puede controlar para que las funcionalidades tengan un aspecto tan fabuloso que los usuarios estén deseando empezar a usarlas.

• Los tamaños y las formas que usa: ¿Reflejan la importancia de las funcionalidades? ¿Están equilibrados entre sí? ¿Aprovechan el espacio de manera eficiente?
  
• Los tipos de gráfico que emplea: ¿Son la forma correcta de visualizar los datos que presentan? ¿Son coherentes (los tipos de gráfico similares se usan para datos similares y los tipos de gráfico diferentes se usan para datos diferentes)?
  
• Alineación, espacio y posicionamiento: ¿Los elementos están dispuestos de forma ordenada y agradable a la vista? ¿Se diferencian entre sí para poder distinguir dónde termina uno y dónde empieza otro? ¿Hay demasiado espacio (o muy poco) para separar los elementos?
  
• Colores: ¿Tiene una paleta agradable en la que los colores están conjuntados de manera apropiada? ¿Los elementos que deben destacar tienen colores efectivos? ¿Se aplican los colores de manera coherente a los elementos similares?
  
• Fuentes: ¿Los tamaños y los tipos de fuente son coherentes, y se presentan los mismos tamaños y las mismas fuentes para los mismos niveles de información?
  
• Marca: ¿Incorporó los elementos de marca de su equipo o compañía donde corresponda?
  

Como lograr que The Motivator sea más motivador

Teniendo en cuenta estos elementos, consideremos las partes del tablero de The Motivator que puedan ser, digamos, desmotivadoras. Hay algunos elementos de la superficie que son claramente incorrectos (ya se percató de algunos de ellos).

• No puede ver el nivel de detalle sobre las actividades que necesitamos. Quizás se necesitan otros tipos de gráfico.
  
• ¿Y por qué son tan grandes las barras de las distintas actividades (llamadas, emails, etc.)? Seguro que el espacio que ocupan podría usarse de forma mucho más efectiva y dejar sitio para otras mediciones de utilidad (como promedios/indicadores de referencia, detalles sobre cada tipo de actividad, etc.).
  
• El tamaño de fuente es incoherente. Las mediciones de la izquierda presentan tamaños diferentes. ¿Siguen algún patrón? ¿O es aleatorio? Es imposible saberlo.
  
• Algunas partes del tablero se combinan entre sí. El nombre del propietario forma parte de un widget que incluye multitud de valores numéricos.
  
• Los colores y los tamaños de las secciones que muestran los totales no tienen sentido.
  

Renovación de My Motivator, paso 3: el tamaño y los colores importan

Ahora nos encontramos en la etapa de diseño en la que podemos empezar a arreglar esos problemas. Al terminar el último paso de la renovación, percibió que los cuadros de resumen que muestran las actividades totales, vencidas y completadas presentaban tamaños y colores incorrectos. Volvamos a Analytics Studio y arreglemos eso.

1. Abra el tablero de My Motivator en el diseñador de tableros.
   
2. Cambie el tamaño de la medición de actividades totales a 4 celdas de ancho.
   
3. Arrastre la medición de actividades vencidas 1 celda a la izquierda.
   
4. Amplíe la medición de actividades completadas 1 celda a la izquierda. Ahora sus widgets de mediciones tienen el mismo tamaño.  Pero no tienen el mismo color.
   
5. Haga clic en la medición de actividades totales.
   
6. En el panel de propiedades del widget de la derecha, haga clic en Estilo de widget para ampliarlo.
   
7. En Color de fondo, haga clic en el color actual y seleccione el azul oscuro. 
   
8. El texto del widget también es oscuro, así que ahora es difícil de leer. La solución es sencilla. En el panel de propiedades del widget, haga clic en Estilo de texto para ampliarlo.
   
9. Cambie el color del número y del título a blanco. Mucho mejor.
   
10. Repita los pasos del 5 al 9 para cambiar los colores de fondo y del texto de las mediciones de actividades vencidas y completadas.
    
11. Guarde su tablero actualizado y, a continuación, previsualícelo. ¡Uau! Ahora esas mediciones sí que destacan. 
    

Hay otra pequeña modificación que puede aplicar aquí. Sigue pareciendo que esas mediciones están un poco desconectadas, cuando lo que realmente quiere es que se vean como una unidad. ¿Recuerda ese widget de contenedor que usó para juntar los widgets? Eso puede servir aquí.

1. Modifique el tablero.
   
2. Para seleccionar el widget de contenedor, pase el ratón sobre el borde del contenedor de debajo de una de las mediciones y haga clic cuando el cursor cambie a flechas cruzadas.
   
3. En el panel de propiedades del widget de la derecha, haga clic en Estilo de widget para ampliarlo.
   
4. Cambie el color de fondo al mismo azul oscuro que usó para las mediciones.
   
5. Guarde su tablero actualizado y, a continuación, previsualícelo.
   

Ahora sus mediciones se leen como una única historia.

The Motivator, renovado

Ya casi terminamos. Identificó la audiencia, el propósito y las funcionalidades de su aplicación. Comprendió que The Motivator no estaba a la altura de dichos diseños. Y realizó unos cuantos arreglos a todos los niveles: propósito, estructura y superficie.

Está claro que su aplicación está cada vez más cerca de sus objetivos de diseño. Pero también está claro que queda un largo camino por recorrer. No podemos acompañarlo en cada uno de los pasos que le lleven a la meta. Eso queda fuera del ámbito de este módulo de Trailhead. Le presentamos los aspectos básicos de diseño y le enseñamos unas cuantas técnicas para que empezara a expresar sus ideas.

No obstante, podemos mostrarle The Motivator, renovado por nuestro equipo de diseño. Así que, sin más dilación, regrese a Analytics Studio y abra el tablero The Motivator 2.

¡Genial! Puede ver de inmediato que la renovación acabada mejora el original.

• Mejoras relativas al propósito. Ahora incluye el importantísimo tablero de líderes a la izquierda, el filtro Periodo de tiempo y muchos más detalles sobre todo tipo de actividades. Además, ahora incluye detalles de cuenta.
  
• Mejoras relativas a la estructura. Los indicadores clave de desempeño de resumen están en la parte superior, adonde los movimos. Asimismo, los indicadores clave de desempeño de cada miembro del equipo están en la parte superior izquierda, donde destacan más y son más accesibles. Y el espacio está distribuido de manera mucho más apropiada: en lugar de barras de gran tamaño que solo representaban los totales de cada actividad, en el mismo espacio hay multitud de detalles de todas las actividades. Además, los elementos similares están juntos, mientras que los elementos diferentes están separados entre sí.
  
• Mejoras relativas a la superficie. La estética es la apropiada y consigue que a sus usuarios les apasione su aplicación. Los colores combinan. Es más fácil distinguir los elementos con la nueva paleta de colores. Los tamaños de fuente son coherentes. Los elementos similares presentan tamaño, color y disposición similares. El conjunto tiene un aspecto totalmente profesional.
  

Excelente, ¿verdad? La verdad es que hicimos un poco de trampa y le llevamos directamente a la línea de meta. Pero esperamos que pueda ver cómo llegamos hasta ahí. Y deseamos que mediante el uso de los recursos a los que se hace referencia a lo largo de este módulo, pueda llegar hasta ahí por sí mismo dedicándole un poco de tiempo y determinación.

El trabajo de un administrador de diseño nunca acaba

Puede que esto sea suficiente por ahora. Pero como administrador de DTC, pronto descubrirá que conformarse con lo aceptable nunca es suficiente. Sus usuarios esperan mejoras, y ¿a que siempre hay formas de que una aplicación sea más fácil de usar?

Por ejemplo, conoce la funcionalidad de páginas de Analytics Studio, que facilita el uso de los tableros al dividir el contenido en varias páginas. Le permiten contar una historia mediante la creación de una ruta dinámica a través de su tablero. Quizás cada actividad de The Motivator podría tener su propia página, y podría agregar detalles útiles, como ver el progreso de cada representante hacia la cuota, las negociaciones cerradas ganadas y cerradas perdidas y los ingresos totales. Esto puede ayudar a que tanto usted como sus usuarios comprendan en qué medida contribuyen las actividades al desempeño de ventas y vean si determinados tipos de actividades tienen más impacto que otros.

Pero dejaremos eso para otro día. Su inesperado viaje por el mundo del diseño casi terminó. Lo único que le queda por hacer es responder a estas preguntas y completar su insignia obtenida con esfuerzo.

Recursos

• Crear páginas de tablero en la Ayuda de Salesforce.