Aplicaciones modernas

Artículo
03/10/2015

Elabore una experiencia de usuario superior con iconos dinámicos

Rachel Appel Los iconos dinámicos son una manera efectiva de dar a conocer su aplicación ya que puede mostrar información de la misma sin que el usuario tenga que entrar a ella. Como parte de la característica de la experiencia de usuario de la plataforma Windows, los iconos dinámicos han de ser atractivos y estar repletos de contenido que merezca la pena revisar.

Por ello, los iconos dinámicos son su oportunidad de dar al usuario una primera impresión excelente de la aplicación. Al usuario no le interesan ni el código ni los detalles técnicos. Solo le importa el tipo de experiencia que tendrá cuando utilice su aplicación. ¿Es sencilla de usar? ¿Es intuitiva? Esto es lo que realmente interesa al usuario y no los entresijos referentes al funcionamiento de la aplicación.

De esta manera, los iconos dinámicos se convierten en la antesala de su aplicación; serán la primera impresión que el usuario tenga de ella y que le informarán acerca de su uso. Así, lo primero que vea y use todo aquel que decida utilizar su aplicación, serán los iconos dinámicos. No importa si solo quieren iniciar la aplicación o simplemente recopilar aquellos pequeños fragmentos de datos que usted quiera mostrar. Los iconos dinámicos son la manera de crear y dar esa importantísima primera impresión.

Por esa razón, tiene que asegurarse de que tanto sus iconos como la pantalla de presentación resultan atractivos y sugerentes. Por supuesto, esto no significa que deba ignorar el resto de la aplicación, pero jamás conseguirá usuarios si a sus iconos les falta encanto. Como ya se imaginará, puede actualizar periódicamente sus iconos dinámicos con información reciente a través de las notificaciones de inserción. Es más, puede ampliar las notificaciones agregándolas en la pantalla de bloqueo para que muestren información relacionada con la aplicación.

En la Ilustración 1 se muestran los cuatro estilos de iconos dinámicos que tiene disponibles en las tabletas y escritorios de Windows: grande, ancho, medio y pequeño. En las imágenes de la Ilustración 1 se muestra cómo la aplicación The Weather Channel se ha esforzado en mantener un diseño pulcro cuando los iconos no están mostrando información. Cuando los iconos estén activos, podrá ver cómo estos muestran solo la información más relevante de gráficos detallados. En este caso, se muestran el estado actual del tiempo y cualquier advertencia de tormenta intensa.

Ilustración 1. Los cuatro tamaños de los iconos dinámicos: grande, ancho, medio y pequeño

Una experiencia de usuario mejorada le permitirá obtener una mejor puntuación en la tienda y más usuarios satisfechos. Los iconos dinámicos que lleven su marca personalizada son la mejor opción para conseguir que su aplicación destaque entre otras. En la Ilustración 1 se muestra cómo los iconos pueden ser parte de una gran experiencia. Los usuarios no necesitan abrir la aplicación para ver el tiempo que hace. En el gran icono principal, el usuario puede configurar hasta tres ciudades para ver la predicción del tiempo y realizar el seguimiento de una de ellas en el resto de iconos. Para ello, hay que apretar un montón de datos en un espacio de 310 x 310 píxeles o en uno incluso más pequeño.

Cómo funcionan los gráficos con iconos dinámicos

Una vez explicada la importancia de los iconos dinámicos, ha llegado el momento de comprender cómo los gráficos trabajan en conjunto con ellos. Afortunadamente, Microsoft ha hecho un gran trabajo al crear un ejemplo de experiencia de usuario fácil de usar para los desarrolladores y con un conjunto de principios de diseño que funcionan perfectamente en tabletas, teléfonos y dispositivos táctiles más pequeños. Ahora puede publicar aplicaciones atractivas sin tener que contratar a un diseñador. Por supuesto, esto no quiere decir que deba descartar completamente la ayuda de los diseñadores. Algunas aplicaciones, especialmente los juegos, tienen gráficos sumamente complicados que requieren las técnicas de un diseñador experto.

Este artículo englobará varios diseños de iconos dinámicos que, aquellos desarrolladores que no tengan la formación de un diseñador, podrán crear fácilmente. Como parte del conjunto de principios, los iconos dinámicos permiten al usuario obtener datos de su aplicación sin tener que interactuar con ella. Esto es de lo más conveniente ya que el usuario puede revisar rápidamente la pantalla principal de su dispositivo para, en un abrir y cerrar de ojos, obtener información de múltiples orígenes.

Existen dos tipos de gráficos en una aplicación moderna: los generados por el usuario y los gráficos de aplicación. Por ejemplo, las fotos profesionales o de las vacaciones familiares se consideran gráficos generados por el usuario. Las imágenes que hay dentro de los iconos dinámicos o en la barra de la aplicación son gráficos de la aplicación. A la hora de crear iconos, puede utilizar cualquiera de estos dos tipos para transmitir información. Visual Studio incluye plantillas que siguen el diseño moderno de Microsoft y que le ayudarán a conseguir una presentación profesional. Esto quiere decir que, todo lo que necesita está ya en el archivo package.appxmanifest. Lo único que tiene que hacer es proporcionar los gráficos en el tamaño correcto.

Además, es importante que aquellos iconos que aun no están activos tengan una nomenclatura adecuada. Tal y como puede ver en la Ilustración 2, los iconos poseen un diseño simple, con un globo para insertar diálogos y las iniciales en inglés correspondientes a Quote of the Day (QotD o cita del día). Gracias a su claro diseño y brillante color rojo, es fácil buscar y saber de qué tipo de aplicación estamos hablando. Por ahora, solo son iconos estáticos estándar. Pero eso cambiará cuando comience a enviar actualizaciones.

Ilustración 2. Iconos dinámicos para la aplicación Quote of the Day

Si va a utilizar gráficos en una aplicación de la Tienda Windows o de la Tienda de Windows Phone, necesitará numerosas imágenes para lo siguiente:

Iconos dinámicos: recuadros o rectángulos grandes o pequeños que el usuario pulsa o en los que hace clic para iniciar una aplicación. Normalmente contienen imágenes o texto.
Distintivos: pequeños iconos o glifos en los iconos dinámicos que indican el estado de la aplicación. En la Ilustración 1 se muestra un distintivo en iconos grandes y pequeños.
Pantalla de presentación: esta es la pantalla introductoria que se muestra justo antes de que se cargue la aplicación. Esta pantalla frecuentemente contiene un logotipo o un gráfico.
Iconos de la aplicación: estos iconos muestran los datos de la aplicación y están en GridView o en ListView. Son exactamente iguales a los iconos dinámicos de la página de inicio de Windows.

Estas imágenes funcionarán mejor si utiliza los formatos .png y .jpg. Cada aplicación de la Tienda Windows y de la Tienda de Windows Phone puede tener diversos tamaños de estos activos de imagen. Puede configurar qué imágenes pertenecen a cada icono editando el manifiesto del paquete del proyecto. El manifiesto del paquete es un archivo donde puede configurar todos los ajustes característicos de la aplicación, como pueden ser el nombre, número de versión, activos gráficos y declaraciones de capacidades. En la Ilustración 3 se muestran los logotipos que ha definido en package.appxmanifest en una aplicación de la Tienda Windows.

Ilustración 3. Configurar los gráficos de los iconos en el archivo Package.appxmanifest de la aplicación

Deberá proporcionar, como mínimo, un gráfico por cada tipo de activo (se muestran a continuación) o la aplicación mostrará sus iconos predeterminados:

Logotipo cuadrado de 70 x 70: imagen de 70 x 70 píxeles
Logotipo cuadrado de 150 x 150: imagen de 150 x 150 píxeles
Logotipo ancho de 350 x 150: imagen de 350 x 150 píxeles
Logotipo cuadrado de 310 x 310: imagen de 310 x 310 píxeles
Logotipo cuadrado de 30 x 30: imagen de 30 x 30 píxeles

Puede, y debería, proporcionar gráficos a escala para estas clases de iconos. La escala de los activos para los elementos de la Ilustración 3 es del 80, 100, 140 y 180 por ciento. En la parte inferior de la Ilustración 3 encontrará una lista con las dimensiones precisas que necesitan los activos a escala. Tenga en cuenta que estas solo son para las aplicaciones de la Tienda Windows. Los proyectos de las aplicaciones de la Tienda de Windows Phone, tienen conjuntos de activos ligeramente diferentes y escalas que funcionan en los tipos de dispositivo más pequeños. Tanto las aplicaciones de la Tienda Windows y de la Tienda de Windows Phone tienen la misma configuración para el logotipo y la pantalla de presentación:

Logotipo de la Tienda: es el logotipo se muestra en la tienda.
Logotipo de distintivo: es el pequeño icono que se puede mostrar en la pantalla de bloqueo o dentro de los iconos ya existentes.
Pantalla de presentación: es la página a pantalla completa que se muestra al inicio de la aplicación y que normalmente contiene un logotipo o un texto de introducción.

Existen variadas versiones de estas imágenes debido a la necesidad de modificar su tamaño para adaptarlo correctamente a las diversas configuraciones de pantalla; por ejemplo, del escritorio al móvil, a la tableta o a otros dispositivos. No hace falta ampliar demasiado una imagen de 150 x 150 píxeles para que comience a verse borrosa y pixelada.

Puede crear gráficos para los iconos utilizando cualquier programa de edición de fotos o gráficos. Con estas herramientas, no es difícil crear un logotipo como el de la Ilustración 2: algo simple a la vez que relevante. Además, tiene una gran cantidad de gráficos disponibles para utilizarlos en las aplicaciones.

Programar iconos dinámicos a partir de plantillas

Si no fuera por su capacidad de mostrar diferentes imágenes y texto en momentos diferentes, los iconos dinámicos solo serían meros iconos. Y lo que los hace dinámicos son las actualizaciones habituales. Puede actualizar iconos con código o integrándolos a las notificaciones de inserción. Si decide utilizar la inserción, puede actualizar sus iconos utilizando tareas en segundo plano que se adapten al ciclo vital del proceso. De esta manera, su aplicación no necesitará ejecutarse per se, ya que una parte del código puede ejecutarse en intervalos predeterminados del ciclo y a través de cinco elementos diferentes. Para más información acerca de cómo administrar el proceso del ciclo de vida, visite el artículo “The Windows Store App Lifecycle” (El ciclo vital de las aplicaciones de la Tienda Windows) en msdn.microsoft.com/magazine/jj660301.

El código que se muestra en la Ilustración 4 realiza una simple actualización para generar los iconos que se muestran en la Ilustración 5, sin necesidad de notificaciones de inserción. Primero, obtiene un objeto TileUpdater a partir de la llamada al CreateTileUpdaterForApplication estático de la clase TileUpdateManager. Una vez hecho esto, el código procede a buscar una plantilla predefinida de iconos pasando una de las opciones de enumeración TileTemplateType al método GetTemplateContent de la clase TileManager.

Ilustración 4. Actualización simple de iconos sin notificaciones de inserción

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
var square150x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileSquare150x150Text04);
square150x150.GetElementsByTagName("text")[0].InnerText =
  "Only in the darkness can you see the stars. –Dr. Martin Luther King, Jr.";
updater.Update(new TileNotification(square150x150));
var wide310x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileWide310x150SmallImageAndText03);
wide310x150.GetElementsByTagName("text")[0].InnerText =
  "We live in a society exquisitely dependent on science and
  technology, in which hardly anyone knows anything about
  science and technology. - Carl Sagan";
((XmlElement)wide310x150.GetElementsByTagName("image")[0]).SetAttribute("src",
  "ms-appx:///Assets/qotd310x150-sm.png");
updater.Update(new TileNotification(wide310x150));
var large310x310 =
  TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310TextList02);
large310x310.GetElementsByTagName("text")[0].InnerText =
  "Let us pick up our books and our pens, they are the most powerful
  weapons. -Malala Yousafzai";
large310x310.GetElementsByTagName("text")[1].InnerText =
  "Never give up, for that is just the place and time that the tide will turn.
  -Harriet Beecher Stowe";
large310x310.GetElementsByTagName("text")[2].InnerText =
  "I've learned that people will forget what you said, people
  will forget what you did, but people will never forget
  how you made them feel. -Maya Angelou";
updater.Update(new TileNotification(large310x310));

Ilustración 5. Varios tamaños de iconos que puede usar

Si accede al atributo innerText o llama a SetAttribute, podrá hacer que el código funcione con el icono. Esto se debe a que es una plantilla HTML la que se encarga de describir la apariencia y comportamiento del icono. Afortunadamente y, aunque aun así esto se parezca al HTML, los desarrolladores XAML no necesitan tener demasiados conocimientos de HTML para crear un icono. Después de todo, se parece al HTML. De todas formas, tenga en cuenta que elementos como el HTML que se muestra aquí, son los que definen la plantilla TileSquare150x150Text04.

<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text04" >
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
  </visual>
</tile>

No puede sacar de repente un icono antiguo de las antiguas dimensiones y tampoco puede escribir la plantilla HTML usted mismo. En vez de ello, tiene la oportunidad de elegir entre una gran variedad de plantillas que le permitirán editar el tamaño de un icono dinámico básico, los iconos y los mensajes. Podrá encontrar una lista de estas plantillas tanto para Windows 8.1 como para Windows Phone 8.1, además de ejemplos de código en bit.ly/1oqwQd6.

Elija una de las plantillas de la lista y utilícela en su código. En la Ilustración 4, la llamada a GetTemplateContent es lo que ha obtenido la plantilla predefinida. Además, tiene una gran variedad de plantillas disponibles entre las que elegir.

Llegados a este punto, las muestras de código ya se han encargado de actualizar una vez el icono dinámico al momento y ejecutando una parte del código. Si quiere agregar un poco de dinamismo extra, actualice los iconos habitualmente y con información reciente. Puede hacer esto si agrega tareas en segundo plano e inserta notas en su aplicación. Ya que este artículo se ha centrado más en la experiencia de usuario, tal vez desee ver este vídeo en bit.ly/1vH6J2p para aprender a actualizar un icono dinámico desde una tarea en segundo plano.

Utilizar iconos secundarios para una experiencia de usuario de primera categoría

Es probable que los usuarios quieran anclar algún tipo de información a la pantalla de inicio. Buenos ejemplos de qué tipo de cosas querrían anclar a su pantalla son los billetes de avión, un eBook o símbolos específicos de tableros de cotizaciones. Para poder hacer esto en Windows 8.1 o en Windows Phone 8.1, el usuario deberá utilizar iconos dinámicos secundarios. Este tipo de iconos secundarios permiten al usuario personalizar su aplicación de forma fácil, así que gracias a ellos conseguirá incrementar su clasificación en la tienda.

En el mundo que rodea a las aplicaciones, existe un concepto conocido como vinculación en profundidad. Esto es: el usuario navega varias veces por la aplicación y después la acaba anclando para poder acceder a ella más tarde. A continuación encontrará varios usos que puede dar a los iconos dinámicos secundarios:

La predicción del tiempo de una ciudad determinada
Itinerarios de viaje para un recorrido determinado
Partidas guardadas
Películas determinadas para comenzar o seguir viendo.
La información de contacto de un amigo
Sus imágenes favoritas
Alarmas personalizadas

Tenga en cuenta que estos iconos son secundarios debido a que ya cuenta con un icono dinámico principal. Además, las actualizaciones dedicadas a las aplicaciones deberían estar en el icono principal, aunque no es una regla que haya que seguir a rajatabla. A parte los tipos de determinados datos que aparecen en los iconos secundarios no suelen tener mucho sentido si aparecen en el icono principal, ya que los usuarios normalmente inician la aplicación y después van a la página de inicio. Cuando un usuario inicia una aplicación con los iconos secundarios, estos le remiten a una parte específica de la aplicación. El término que se utiliza para esto, es "vinculación en profundidad". Como regla general, utilice los iconos principales para iniciar la pantalla de inicio de la aplicación y los iconos secundarios para detalles específicos de datos.

El código que se indica a continuación crea y muestra un icono secundario:

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
  string displayName = "Secondary tile";          
  string tileActivationArguments = "Look both ways before crossing the street";
  System.Uri square150x150Logo = 
    new System.Uri("ms-appx:///Assets/Logo.scale-100.png");
  SecondaryTile secondaryTile = new SecondaryTile("Pinned",
    displayName,
    tileActivationArguments,
    square150x150Logo,
    TileSize.Square150x150);
}

Cuando llame al constructor SecondaryTile, pase toda la información que necesitará para llenar el icono. Por ejemplo el nombre, los argumentos, el tamaño y la imagen que quiera usar. Todo lo que necesita está en la llamada y, al estar el constructor sobrecargado, tendrá una gran cantidad de opciones.

Los iconos secundarios son similares a los iconos dinámicos estándar, pero los primeros permiten una vinculación en profundidad del contenido o de una parte específica de la aplicación. Cuanto más fáciles de usar sean sus iconos (tanto principales como secundarios) para los usuarios, mejores opiniones obtendrá en la tienda, así que es una buena idea utilizar iconos secundarios si su aplicación contiene datos específicos que estaría bien poder ver desde la página de inicio de Windows.

Una conclusión dinámica

Cuando un usuario no tiene que hacer nada para interactuar con su aplicación y aun así recibe información interesante, ya ha conseguido una victoria y esta se verá reflejada en la clasificación de la tienda de aplicaciones. Es más, incluso aquellos desarrolladores que no dominan demasiado el tema del diseño gráfico pueden crear aplicaciones atractivas y, a la vez, útiles.

Recuerde crear gráficos de todos los tamaños escalados posibles y Windows se encargará de proporcionar el mejor gráfico según el dispositivo que se utilice. Cuanto mejor sea la experiencia de usuario, mejor será su clasificación en la tienda de aplicaciones y, por supuesto, esto se traducirá en más descargas.

Rachel Appel es un consultora, autora, mentora y empleada de Microsoft con más de 20 años de experiencia en la industria de TI. Da conferencias sobre las principales industrias como Visual Studio Live!, DevConnections, MIX y más. Su experiencia se basa en el desarrollo de soluciones que alinean la empresa y la tecnología en la pila del dispositivo y web abierta de Microsoft. Para obtener más información sobre Appel, visite su sitio web en rachelappel.com.

Gracias al siguiente experto técnico de Microsoft por revisar este artículo: Frank La Vigne