Aplicativos modernos

Criar um melhor UX com blocos online

Rachel Appel

Os blocos online são uma maneira eficaz de apresentar o seu aplicativo. Você pode exibir informações sobre o seu aplicativo sem a necessidade de um usuário entrar no aplicativo em si. Como parte do recurso UX da plataforma do Windows, os blocos online devem ser atraentes e convidativos, cheios de conteúdo relevante e digno de clique.

Os blocos online são a sua chance de fazer uma grande primeira impressão. O usuário não se preocupa com o código ou qualquer detalhe técnico. Tudo o que ele se preocupa é a experiência que terá com o seu aplicativo. É fácil de usar? É intuitivo? Essas coisas são mais importantes para o usuário do que o subjacente.

Os blocos online são a porta de entrada para o seu aplicativo, essa primeira impressão que informa o usuário sobre a usabilidade do seu aplicativo. Todo mundo que usa o aplicativo verá e usará o seu bloco online antes de qualquer outra parte do aplicativo. Não importa se é para iniciar o aplicativo ou apenas fazer um lanche nos petiscos de dados que você exibe neles. O bloco online é como você pode tornar essa primeira impressão muito importante.

Isso significa que seria melhor garantir que seus blocos e a tela inicial são atraentes. Isso não quer dizer que você pode ignorar o resto do aplicativo, mas você nunca obterá os usuários a esse ponto sem conduzir com alguns blocos de boa aparência. Como você deve imaginar, você pode atualizar os blocos online com novas informações periodicamente, através de notificações por push. Você pode até mesmo estender as notificações para a tela de bloqueio, acrescentando selos para mostrar as informações relacionadas com o aplicativo.

A Figura 1 ilustra os quatro estilos de blocos online disponíveis em tablets e desktops do Windows: grande, largo, médio e pequeno. As imagens na Figura 1 mostram como o Canal do tempo capitalizou um design limpo quando os blocos não estão exibindo as informações. Quando eles estão, você exibe gráficos sofisticados e os blocos exibem apenas as informações mais importantes. Nesse caso, é o clima atual e quaisquer avisos de tempestades severas.

Figura 1 Os quatro tamanhos dos blocos online - grande, largo, médio e pequeno

O melhor UX levará a melhores avaliações na loja e melhor satisfação do usuário. Os blocos online com a sua marca são a melhor forma de diferenciar seu aplicativo de outros. A Figura 1 demonstra como os blocos podem ser parte de uma excelente experiência. Os usuários não precisam abrir o aplicativo para ver o clima atual. No grande bloco primário, eles podem definir até três cidades para acompanhar o clima acompanhar uma cidade em um momento diferente dos demais. Isso está apertando alguns dados graves em apenas 310x310 pixels ou um campo ainda menor.

Como os gráficos do bloco online funcionam

Agora que eu já expliquei por que os blocos online são importantes, é hora de entender como os gráficos funcionam com eles. Felizmente, a Microsoft fez um ótimo trabalho criando um paradigma UX amigável com o desenvolvedor fácil de seguir com um conjunto de princípios de design que funciona bem em tablets, telefones e dispositivos de primeiro toque, menores. Você pode publicar aplicativos que parecem bons sem a contratação de um designer. Isso não quer dizer que você deve evitar completamente os designers. Alguns aplicativos, especialmente jogos, têm gráficos complicados que requerem a entrada de um designer.

Este artigo cobrirá alguns projetos do bloco online que o não projeto dos desenvolvedores podem realizar facilmente. Como parte desse conjunto de princípios, os blocos online habilitam o usuário para consumir dados de seu aplicativo sem realmente interagir com o seu aplicativo. Essa é a altura da conveniência, como o usuário pode rapidamente digitalizar a tela inicial do seu dispositivo para obter informações relevantes de várias fontes em um flash.

Existem dois tipos de gráficos em um aplicativo moderno: gráficos gerados pelo usuário e gráficos do aplicativo. As férias em família ou fotos profissionais são consideradas geradas pelo usuário. As imagens dentro dos blocos online ou na barra dos aplicativos são gráficos do aplicativo. Ao construir blocos, você pode usar qualquer tipo de transmissão de informações. O Visual Studio inclui modelos que seguem o design moderno da Microsoft que o ajudará a conseguir uma apresentação profissional. Isso significa que tudo que você precisa está pronto no arquivo package.appxmanifest. Tudo que você precisa fazer é fornecer os próprios gráficos no tamanho correto.

É importante ter marca própria para blocos que não estão online ainda. Como você pode ver na Figura 2, os blocos têm um design simples com um balão de citação e as iniciais para Cota do Dia (QotD). É fácil encontrar e determinar qual aplicativo é esse com seu design limpo e cor vermelha brilhante. Por enquanto, eles são blocos estáticos padrão. Isso mudará quando você começar a enviar atualizações.

Figura 2 Os blocos online para o aplicativo de cota do dia

Utilizar gráficos em um aplicativo do Windows Store ou Windows Phone Store requer várias imagens para os seguintes ativos:

• Blocos online: Os quadrados grandes ou pequenos ou retângulos que o usuário toca ou clica para iniciar um aplicativo. Eles geralmente contêm imagens ou texto.
• Selos: Ícones ou glifos pequenos sobre os blocos online que denotam o status do aplicativo. A Figura 1 mostra um selo em ambos os blocos, grande e pequeno.
• Tela inicial: A tela introdutória que aparece um pouco antes das cargas de aplicativos. Frequentemente, essa tela contém um logotipo ou gráfico.
• Blocos no aplicativo: Esses blocos exibem dados de aplicativos e online em um GridView ou ListView. Eles se parecem como blocos online na página Iniciar do Windows.

Essas imagens funcionam melhor utilizando os formatos .png e .jpg. Cada aplicativo do Windows Store e Windows Phone Store pode conter muitos tamanhos diferentes destes ativos de imagem. Você pode configurar quais imagens pertencem a qual bloco ao editar o manifesto do pacote do projeto. O manifesto do pacote é um arquivo onde você pode configurar todas as configurações específicas do aplicativo, tais como o nome, o número da versão, os ativos gráficos e as declarações de capacidades. A Figura 3 mostra os logotipos que você define no package.appxmanifest em um aplicativo do Windows Store.

Figura 3 Configurar os gráficos do bloco no arquivo Package.appxmanifest do aplicativo

Você deve fornecer pelo menos um gráfico para cada um dos seguintes tipos de ativos ou o aplicativo mostrará seus ícones padrão em vez disso:

• Logotipo de 70x70 quadrado: Uma imagem de 70x70 pixels
• Logotipo de 150x150 quadrado: Uma imagem de 150x150 pixels
• Logotipo de 350x150 grande: Uma imagem de 350x150 pixels
• Logotipo de 310x310 quadrado: Uma imagem de 310x310 pixels
• Logotipo de 30x30 quadrado: Uma imagem de 30x30 pixels

Você pode, e deve, fornecer gráficos dimensionados para essas classes de blocos. Os ativos dimensionados para os itens na Figura 3 estão em 80%, 100%, 140% e 180%. A parte inferior da Figura 3 lista as dimensões precisas necessárias para os ativos dimensionados. Observe que estes são apenas para os aplicativos do Windows Store. Os projetos do aplicativo do Windows Phone Store são ligeiramente diferentes dos conjuntos de ativos e dimensões que funcionam para os tipos de dispositivos menores. Os aplicativos do Windows Store e Windows Phone Store têm o seguinte logotipo e configurações de tela inicial:

• Logotipo do Store: O logotipo exibido na loja.
• Logotipo do selo: Um pequeno ícone que pode aparecer na tela de bloqueio ou no interior dos blocos existentes.
• Tela inicial: Uma página em tela cheia normalmente contém um logotipo ou texto introdutório mostrado no lançamento do aplicativo.

Existem muitas versões dessas imagens por causa da necessidade de dimensioná-las para o tamanho corretamente nas várias configurações de tela, do desktop para o celular, para tablet e outros. A imagem de 150x150 pixels não precisa esticar muito antes de começar a parecer pixelada e embaçada.

Você pode criar gráficos para blocos usando qualquer programa de foto ou de edição gráfica. Com estas ferramentas, não é difícil criar um logotipo como na Figura 2, que é simples, mas perceptível. Existem muitas ações gráficas que também estão disponíveis para uso em aplicativos.

Blocos de código dos modelos

Os blocos seriam pouco mais do que ícones simples, se não por sua capacidade de exibir imagens diferentes e texto em momentos diferentes. São essas atualizações regulares que o mantém vivo. Você pode atualizar os blocos com código ou integrá-los com notificações encaixam no ciclo de vida do processo. Dessa forma, o aplicativo não precisa estar em execução, por si só, ainda que algum código possa ser executado em intervalos predeterminados para circular cinco itens diferentes. Para obter informações detalhadas sobre o gerenciamento do ciclo de vida do processo, consulte “O ciclo de vida do aplicativo do Windows Store” no msdn.microsoft.com/magazine/jj660301.

O código na Figura 4 realiza uma atualização de bloco simples para gerar os blocos na Figura 5, sem notificações por push. Ele primeiro obtém um objeto TileUpdater da chamada do CreateTileUpdaterForApplication estático da classe TileUpdateManager. Uma vez feito isso, o código se move para buscar um modelo de bloco pré-definido ao passar em uma das opções de enum. do TileTemplateType para o método da classe GetTemplateContent.

Figura 4 Atualização do bloco simples sem notificações por push

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));

Figura 5 Vários tamanhos de bloco que você pode usar

Acessar o atributo innerText ou chamar SetAttribute permite que o código funcione com o bloco. Isso porque um modelo HTML é o que descreve como um bloco aparenta. Felizmente, os desenvolvedores XAML não precisa aprender um monte de HTML para fazer apenas um bloco. Ele se parece com HTML, afinal de contas. No entanto, você deve saber sobre elementos como o HTML aqui que define o modelo TileSquare150x150Text04.

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

Você não pode simplesmente agitar qualquer bloco antigo fora de quaisquer dimensões antigas e você não grava o modelo HTML em si. Em vez disso, existem vários modelos entre os quais você pode escolher, que permite que você edite as formas do bloco básico, os ícones e as mensagens. Existe uma lista destes modelos para o Windows 8.1 e Windows Phone 8.1, junto com exemplos de código em bit.ly/1oqwQd6.

Escolha um dos modelos na lista e use-o em seu código. Na Figura 4, a chamada para GetTemplateContent é o que busca este modelo pré-definido. Você pode escolher entre qualquer um dos inúmeros modelos disponíveis.

Até este ponto, os exemplos de código têm lidado com a simples atualização de um bloco de uma vez, no local, através da execução de algum código. Se você quiser adicionar um pouco de entusiasmo extra, atualize os blocos periodicamente com novas informações. Você pode fazer isso adicionando tarefas de fundo e empurrando notas para o seu aplicativo. Pelo fato do foco deste artigo ser mais relacionado ao UX, você pode querer ver o vídeo em bit.ly/1vH6J2p para saber como atualizar um bloco por uma tarefa de fundo.

Use os blocos secundários para o UX de primeira classe

Ocasionalmente, os usuários querem fixar alguma parte dos dados na tela Iniciar. Os cartões de embarque aéreos, um livro eletrônico, ou símbolos de cotação da bolsa específicos são todos bons exemplos de coisas que os usuários querem fixar à sua tela. A forma de fazer isso no Windows 8.1 ou Windows Phone 8.1 é com blocos secundários. Os blocos secundários tornam mais fácil para que o usuário personalize seu aplicativo, que se traduz em avaliações mais elevadas na loja.

Existe um conceito de vinculação profunda no mundo do aplicativo. Isso significa que o usuário navega algumas vezes dentro de um aplicativo e, em seguida, o fixa para se vincular a ele posteriormente. Aqui estão vários usos para blocos secundários:

• Clima para uma cidade específica
• Itinerários de viagem para uma viagem específica
• Jogos salvos
• Filmes específicos para iniciar ou continuar
• Informações de contato de um amigo
• Suas imagens favoritas
• Alarmes personalizados

Tenha em mente que esses blocos são secundários porque você já tem um bloco dinâmico primário. As atualizações de todo o aplicativo devem ir no bloco principal, embora não existam regras rígidas e rápidas lá. Os tipos de dados específicos listados para blocos secundários não costumam fazer sentido no bloco principal. Os usuários normalmente iniciam um aplicativo, e depois vão para a sua página inicial. Os blocos secundários permitem que os usuários iniciem um aplicativo e vão diretamente a uma parte específica do aplicativo. O termo para isso é “vinculação profunda”. Como regra geral, use blocos primários para iniciar para a tela Inicial do aplicativo e os blocos secundários para detalhes de dados específicos.

O código a seguir cria e exibe um bloco secundário:

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);
}

Ao chamar o construtor SecondaryTile, passe todas as informações que você precisa para preencher o bloco, como nome, argumentos, tamanho e qual imagem usar. Tudo o que você precisa está na chamada, e o construtor está sobrecarregado, por isso você tem muitas opções.

Os blocos secundários são semelhantes aos blocos padrão, mas eles permitem a vinculação profunda do conteúdo ou uma parte específica do aplicativo. Quanto mais fácil de usar os dois conjuntos de blocos for, melhor será suas avaliações na loja. Então, considere usar blocos secundários se o seu aplicativo contém dados específicos que sejam úteis para exibir na página Iniciar do Windows.

Uma conclusão quadrada

Quando um usuário não precisa fazer nada para interagir com o aplicativo, e ainda recebe informações úteis, isso é uma vitória. As avaliações na loja de aplicativos vão refletir isso. Mesmo os desenvolvedores que não são grandes em design gráfico ainda podem criar aplicativos com boa aparência e úteis.

Lembre-se de criar gráficos quantos tamanhos dimensionados for possível, e o Windows oferecerá o melhor gráfico, dependendo do dispositivo. Quanto melhor o UX, melhor a classificação na loja de aplicativo. E isso se traduz diretamente em mais downloads.

---

Rachel Appel é consultora, autora, mentora e antiga funcionária da Microsoft com mais de 20 anos de experiência no setor de TI. Ela dá palestras em importantes congressos do setor, como o Visual Studio Live!, o DevConnections, o MIX e muitos outros. Sua experiência está ligada a soluções de desenvolvimento que alinham negócios e tecnologia com foco na pilha de desenvolvimento da Microsoft e em Web aberta. Para obter mais informações sobre a Appel, visite seu site em rachelappel.com.

Agradecemos ao seguinte especialista técnico da Microsoft pela revisão deste artigo: Frank La Vigne