Aplicativos de notícias

Este tópico descreve como criar excelentes aplicativos de notícias para o Windows 8.1.

Visão geral

O Windows 8.1 proporciona um alcance sem igual em uma ampla variedade de dispositivos, desde tablets ativados por toque até computadores desktop e laptops de alta resolução. Esses diferentes fatores forma representam uma oportunidade exclusiva para os editores de notícias proporcionarem ótimas experiências em vários cenários e casos de uso e também para alcançarem uma ampla audiência com um único aplicativo. 

A nova Windows Store também fornece novas oportunidades para os fornecedores de aplicativos distribuírem, promoverem e ganharem dinheiro com conteúdo, proporcionando ao mesmo tempo a flexibilidade necessária caso você queira executar o seu próprio mecanismo de comércio para assinaturas.  

Este documento destaca os novos recursos do Windows 8.1 que são de particular importância para aplicativos de notícias, entre eles:

  • Conteúdo antes do cromado—Com o Windows 8.1, seu conteúdo tem destaque enquanto o sistema operacional se move para a tela de fundo. Os leitores ficarão mais envolvidos e menos distraídos do que antes.
  • Permita o destaque da sua marca—O Windows 8.1 permite trazer o prestígio e o reconhecimento da sua marca para um aplicativo com blocos dinâmicos, uma tela inicial, seu logotipo e muito mais.
  • Contratos de compartilhamento e contratos de dispositivo—A nova funcionalidade de nível superior do sistema operacional torna o conteúdo mais compartilhável e ajuda o seu aplicativo a utilizar os dispositivos que se encontram nas proximidades.
  • Notificações—Use blocos e notificações do sistema para alertar o usuário sobre um conteúdo novo, aumentar o envolvimento e incentivar o uso contínuo.

Layout e navegação em aplicativos de notícias

Em geral, aplicativos de notícias apresentam notícias em várias categorias diferentes. Usando o padrão de navegação hierárquica para aplicativos da Windows Store, você pode deixar seu aplicativo realmente rápido e fluente para uso e, ao mesmo, ainda colocar em primeiro plano o conteúdo que os usuários consideram importante.

Para auxiliá-lo a escolher qual o melhor navegador para o seu aplicativo, acesse Tipos de navegadores.

Acesse o Padrão de navegador simples atualmente em uso na seção Características para Aplicativos, da série do início ao fim.

Modelo hierárquico

Em um aplicativo de notícias, existe frequentemente uma grande parcela de conteúdo que o usuário deve descobrir e consumir. Além disso, para gerenciar a densidade das informações, sites e aplicativos de notícias tendem a apresentar várias categorias diferentes. Por exemplo, em geral existe uma seção de "últimas notícias" ou "principais histórias" em destaque na página de nível superior. Além disso, é provável que existam várias outras categorias, como política, notícias mundiais, tecnologia, esportes, finanças e entretenimento, com alguns artigos extraídos e exibidos no nível superior do aplicativo. O uso do modelo hierárquico no Windows 8.1 para layout e interação permite que o seu aplicativo mostre um conteúdo interessante para o usuário no nível superior, em vez de escondê-lo atrás de guias ou menus. A página de aterrissagem de nível superior, ou "hub", pode oferecer uma grande variedade visual, além de envolver os usuários e chamar a atenção deles para diferentes partes do seu aplicativo.

Ao conceber o layout do seu aplicativo, dê prioridade para cenários e categorias com base em sua importância relativa e em até que ponto ele atrairá o maior número possível de usuários. Por exemplo, histórias que figuram entre as principais notícias e categorias de notícias mais atuais são geralmente importantes para a maioria dos usuários de aplicativos de notícias e, portanto, devem ter destaque na página de hub do seu aplicativo.

Este diagrama ilustra um modelo hierárquico para um aplicativo de notícias de amostra.

Exemplo de modelo hierárquico para um aplicativo de notícias

A página de hub do seu aplicativo

O hub do seu aplicativo pode mostrar as principais histórias, as notícias mais atuais, conteúdos recomendados para o usuário e artigos em destaque para todas as diferentes categorias em uma única superfície de fácil movimentação panorâmica. Cada grupo de categorias pode mostrar um conteúdo envolvente no hub. Tocar no cabeçalho de um grupo permite que o usuário navegue até uma seção específica e veja mais conteúdo.

Categorias de notícias

Organize todas as categorias do seu aplicativo em um layout plano na página de hub do aplicativo e destaque alguns artigos em cada categoria para chamar a atenção do usuário para essa categoria em questão. Você pode indicar que existem mais artigos nessa categoria exibindo uma contagem ao lado do cabeçalho do grupo, conforme ilustrado aqui.

Exemplo mostrando como você pode indicar a existência de mais artigos de notícias

Notícias mais atuais

Notícias mais atuais são um cenário essencial para aplicativos de notícias, pois os usuários geralmente se interessam pelas notícias mais recentes e importantes. Você pode destacar as notícias mais atuais e as histórias em desenvolvimento na frente da página de hub tornando-as maiores em comparação ao restante do conteúdo no hub e usando variações de cores e espessuras com base na prioridade da notícia.

O exemplo a seguir diferencia eventos ao vivo com base no posicionamento e no tamanho do conteúdo, além de mostrar o texto "Ao Vivo" em vermelho antes da manchete para chamar a atenção do usuário para esse conteúdo em questão.

Exemplo de como indicar a existência de um conteúdo ao vivo

Indicadores/salvar para depois

Os usuários salvam e marcam artigos para poderem continuar a lê-los mais tarde. Se o seu aplicativo oferecer suporte para esse procedimento de maneira rápida e fluente, os usuários continuarão a iniciá-lo, pois o processo de retornar aos artigos salvos é uma experiência simples e tranquila para eles. Adicione à sua página de hub uma seção com um nome do tipo "Indicadores" ou "Favoritos", para armazenar todos os artigos salvos do usuário. Veja um exemplo.

Exemplo de indicadores

Os usuários podem adicionar artigos à seção "Indicadores" ou "Favoritos" e removê-los quando tiverem terminado sua leitura.

Zoom Semântico

O zoom semântico permite que um usuário navegue rapidamente dentro de um único modo de exibição. Por exemplo, ele pode pinçar e fazer movimento panorâmico rapidamente para ir de uma história na seção de notícias principais até a categoria de notícias atuais na página de hub. O exemplo a seguir mostra como os usuários podem usar o zoom semântico para se mover rapidamente entre as diferentes categorias de notícias.

Exemplo de como o zoom semântico possibilita uma rápida navegação

Veja a seguir mais alguns exemplos do zoom semântico em ação em um aplicativo de notícias.

Exemplos adicionais do zoom semântico

Ao usar o zoom semântico, permita que os usuários reorganizem categorias na página de hub selecionando um grupo e movendo esse grupo pela página. Isso permite que eles personalizem a página de hub do aplicativo e passem a gostar ainda mais do seu aplicativo. Por exemplo, um usuário pode preferir a categoria "Tecnologia" do seu aplicativo e talvez queira colocá-la antes da categoria "Política". Ao proporcionar essa capacidade para os seus usuários, você pode adaptar a aparência do aplicativo de acordo com as preferências deles.

Exemplo de disposição de categorias

O zoom semântico também pode ser usado na página de uma categoria específica para navegar entre artigos diferentes nessa categoria. O zoom semântico permite que os usuários saltem rapidamente de um artigo para outro.

A exibição de artigo do seu aplicativo

A exibição de artigo do seu aplicativo é o local onde o conteúdo é apresentado. Permitir que os usuários aproveitem suas experiências nessa exibição dá um certo destaque ao seu aplicativo, pois é nele que esses usuários passam a maior parte do tempo. É importante que você apresente seu conteúdo de maneira intuitiva e torne essa exibição visualmente agradável. Também é importante garantir que a navegação nessa exibição seja eficiente.

A exibição de artigo para um aplicativo de notícias deve se movimentar horizontalmente, para que os usuários possam usar o dedo polegar para se deslocarem pelo conteúdo de maneira fácil e ergonômica. Além disso, considere dividir os artigos em páginas. Quebras de página em um artigo dão aos usuários uma noção do quanto eles já leram e permite que eles sejam levados diretamente ao ponto para onde desejam ir.

Ilustração indicando movimentação panorâmica na horizontal entre artigos

No entanto, para obter um layout e uma experiência do usuário realmente excelentes, conforme você modela seu artigo de notícias, considere que os usuários irão visualizá-lo em um destes dispositivos:

  • Em um tablet
  • Em um laptop
  • Em um desktop

Cada um desses cenários se beneficia de diferentes layouts que levam em consideração os padrões de uso dos usuários. Por exemplo, quando os usuários lêem notícias em um tablet, eles podem usar os modos de exibição de retrato e paisagem, enquanto, em um laptop ou desktop, a leitura será provavelmente feita no modo de exibição de paisagem. Portanto, crie exibições de artigos com ambas as orientações em mente. Além disso, o layout projetado para um tablet também deve ser otimizado para navegação por toque. Conforme sugerido anteriormente, é bom dividir o conteúdo em páginas. Uma maneira de adicionar páginas com base no toque é usando Pontos de Encaixe dentro do seu artigo para criar um efeito de "lombada". Esse efeito indica aos usuários onde eles se encontram no artigo à medida que se deslocam rapidamente por ele com o uso da movimentação panorâmica.

Como a orientação de paisagem é mais comum para usuários de laptops e desktops, considere como você irá dispor o layout do seu artigo para evitar um conjunto de colunas entediante. Uma técnica de layout é o uso de inserções de conteúdo, imagens ou outros elementos de mídia que se estendem por várias colunas. Você pode adicionar citações ou fazer com que os títulos se estendam pela página inteira para acrescentar variedade ao layout. Além disso, tanto para cenários de laptop e desktop, os usuários usam na maioria das vezes o teclado e o mouse para navegarem. Portanto, é importante garantir que o seu layout responda a entradas de mouse e teclado.

Você pode mostrar artigos e comentários relacionados na exibição de artigo para que os usuários continuem sua experiência de leitura e permaneçam por mais tempo no aplicativo. Veja uma possível aparência.

Usuário vendo artigos e comentários relacionados

Em geral, os usuários estão interessados em uma categoria de notícias ou tópico específico e podem consumir vários artigos relacionados a isso. Se o conteúdo no seu aplicativo tende a ser breve, permita que o usuário faça movimento panorâmico à direita depois do final do artigo para acessar o artigo seguinte ou à esquerda antes do início do artigo para acessar o artigo anterior. Você também pode fornecer o zoom semântico nessa exibição para permitir que os usuários passem para artigos diferentes de maneira realmente rápida.

Exemplo de layout de artigo

Se o conteúdo de cada postagem ou artigo tem tendência a ser longo, considere inserir os botões "Artigo Anterior" e "Próximo Artigo" na barra de aplicativos superior para que o usuário possa acessar facilmente outros artigos. Você pode oferecer esses botões além de permitir que os usuários passem o dedo para trás e para frente entre artigos. É possível experimentar diferentes estilos visuais para esse tipo de botão. Por exemplo, mostrar miniaturas do artigo anterior e do próximo artigo oferece aos usuários uma boa visualização do conteúdo que eles irão acessar. Como alternativa, você pode usar os glifos "Próximo" e "Anterior" padrão, mas tentar tornar a barra de aplicativos superior translúcida ou transparente para que ela não desvie a atenção do conteúdo. Veja a seguir um exemplo desse tipo de botão na barra de aplicativos superior.

Exemplo de interface do usuário com a barra de aplicativos superior demonstrando Próximo e Anterior

Comandos

Comandos para tarefas comuns, como "adicionar aos favoritos", "adicionar novos feeds" e "fixar bloco à tela inicial" devem residir na barra de aplicativos inferior, pois ela consolida esses comandos em um só lugar onde o usuário pode encontrá-los com segurança.

Para saber mais sobre comandos, consulte Design de comandos para aplicativos da Windows Store.

Indicadores

Em geral, os usuários marcam artigos na página de hub quando desejam salvá-los para leitura posterior ou quando estão lendo um artigo que só irão conseguir terminar em uma próxima ocasião. Um aplicativo de notícias atraente deve oferecer suporte a ambas as situações, permitindo que os usuários marquem artigos selecionados usando a barra de aplicativos inferior as páginas de hub ou categorias e durante a leitura desses artigos. O botão de indicador deve ser um botão de alternância— um único botão responsável por adicionar ou remover um indicador.

Utilize sempre indicadores portáteis para que os usuários possam continuar a ler seus artigos marcados independentemente do dispositivo em uso. Certifique-se de que o botão permaneça no lado esquerdo da barra de aplicativos por motivos de consistência, como no exemplo a seguir, mesmo que a função do botão seja contextual na página de hub, mas global na exibição de artigo.

Exemplo mostrando um botão de indicador no lado esquerdo da barra de aplicativos

Consulte Design de navegação para aplicativos da Windows Store para obter mais informações sobre a hierarquia de navegação de um aplicativo.

Seleção de texto

Permita a seleção de conteúdo no seu aplicativo, especialmente para o texto na exibição de artigo, pois os usuários tendem a selecionar trechos de artigos. O sistema mostra automaticamente o menu de contexto para a cópia do conteúdo selecionado.

Contratos

Seu aplicativo de notícias deve usar contratos do Windows 8.1, quando isso for viável, para enriquecer a experiência do usuário e ajudar a conectar o aplicativo com o restante da experiência do Windows. Para saber mais sobre contratos, veja Contratos e extensões de aplicativo.

O contrato de Compartilhamento

O contrato de Compartilhamento fornece aos usuários uma maneira familiar e natural de compartilhar conteúdo entre dois aplicativos. Existem muitos cenários de compartilhamento de conteúdo no seu aplicativo de notícias que podem diferenciá-lo de maneira clara e positiva dos outros. Com o Compartilhamento no Windows 8.1, você obtém todos esses cenários sem precisar adicionar código de integração ao seu aplicativo. Se você quer permitir que os seus usuários compartilhem conteúdo do aplicativo, o aplicativo deve ser uma origem de Compartilhamento. Se você quer permitir que o seu aplicativo consuma dados de outros aplicativos, o aplicativo deve ser um destino de Compartilhamento.

Compartilhando a partir do seu aplicativo de notícias

Uma maioria dos aplicativos na categoria de notícias tem a ver com consumir conteúdo de notícias. Compartilhar artigos e histórias interessantes é um recurso essencial dos aplicativos de notícias de hoje, por isso achamos que cada um desses aplicativos deve ser uma origem para o contrato de Compartilhamento.

Ser uma origem de Compartilhamento significa tornar o conteúdo do seu aplicativo de notícias, seja no formato de URIs, bitmaps, HTML, texto, itens de armazenamento ou tipos de dados personalizados, disponível para outros aplicativos capazes de consumir esses formatos. Esse recurso possibilita muitos cenários atraentes. É fácil imaginar o panorama de compartilhamento social com um contrato desse tipo. Você pode instantaneamente permitir que o aplicativo compartilhe com redes sociais, aplicativos de blog e aplicativos de email.

Exemplo de compartilhamento de um aplicativo de notícias.

Além do compartilhamento social, o contrato permite que os usuários concluam tarefas de psquisa, planejamento e arquivamento compartilhando histórias de notícias com aplicativos de anotações, agregadores de notícias e outros destinos de Compartilhamento. Por exemplo, se eu quiser salvar um treco selecionado de um artigo de notícias em meu notebook com um link para o artigo para referência futura, poderei fazer isso se a origem de Compartilhamento fornecer os tipos de dados certos que representam essas informações.

Ao dar suporte para o contrato de origem de Compartilhamento, você também permite que o seu aplicativo compartilhe diretamente com dispositivos nas proximidades habilitados pelo recurso Tocar e Enviar.

Como um aplicativo de origem, é importante que haja suporte para o maior número possível de tipos de dados que são significativos para o conteúdo que você gostaria que os seus usuários compartilhassem. Isso torna possível para os usuários compartilharem o conteúdo do seu aplicativo com um amplo conjunto de aplicativos de destino de Compartilhamento. No exemplo a seguir, a Contoso News é o aplicativo de origem. Ele está compartilhamento texto, uma miniatura e um link para o artigo que está em foco. O painel de Compartilhamento tem uma lista de Links Rápidos e aplicativos de destino de Compartilhamento que dão suporte ao compartilhamento desses tipos de conteúdo.

Exemplo de opções do painel Compartilhar para compartilhamento de um aplicativo de notícias.

Compartilhando com o seu aplicativo de notícias

Alguns aplicativos de notícias serão excelentes em agregar artigos de outros aplicativos, fornecendo uma maneira de o usuário organizar e consumir informações de um grande conjunto de origens de maneira familiar e autocurativa. Esses aplicativos devem investir no suporte ao contrato de destino de Compartilhamento.

Ser um destino de Compartilhamento significa permitir que o aplicativo consuma os dados fornecidos pelos aplicativos de origem de Compartilhamento de maneira interessante e considerável. No exemplo a seguir, é possível compartilhar um artigo de um aplicativo de notícias com um agregador de notícias para leitura posterior.

Exemplo de compartilhamento para um aplicativo agregador de notícias.

Para saber mais sobre o contrato de Compartilhamento, veja Compartilhando e recebendo conteúdo.

Comentários e integração com outros aplicativos sociais

Aplicativo de notícias podem proporcionar valor permitindo que os seus usuários postem comentários ou discutam artigos e os marquem usando aplicativos que estão integrados ao botão Compartilhar. Ao contar com aplicativos que se integram ao botão Compartilhar, você adapta a experiência de compartilhamento do seu aplicativo aos aplicativos que os seus usuários costumam usar para compartilhamento, além de ajudar os usuários a centralizar todo o processo de compartilhamento em uma única experiência consolidada. Além disso, você não precisa perder tempo escrevendo código para redes sociais específicas, pois, quando novas redes sociais são lançadas, seu aplicativo se integra a elas automaticamente.

Tipografia em aplicativos de notícias

Use a grade de tipografia e a rampa de tamanhos em aplicativos de notícias para criar uma hierarquia visual com a qual os usuários possam examinar e consumir uma ampla variedade de informações de maneira rápida e fácil. Embora o uso da fonte Segoe UI especificada na rampa de fontes seja apropriado para conteúdo de notícias, considere a possibilidade de usar Calibri, nossa fonte recomendada para documentos em aplicativos da Windows Store, ou Cambria, nossa fonte recomendada para "documentos tradicionais". A fonte Georgia é uma escolha popular para sites de notícias na Web e, portanto, também pode ser uma opção familiar para o seu aplicativo de notícias.

Se você optar por especificar fontes do sistema alternativas, confirme se elas estão instaladas com o Windows 8.1 e se não exigem a instalação de um aplicativo separado, como o Microsoft Office. Se você usar suas próprias fontes personalizadas ou licenciadas, verifique se possui direitos legais suficientes para incluí-las no seu aplicativo. Independentemente das fontes utilizadas, a rampa de tipos do Windows 8.1 fornece uma boa orientação quanto ao número máximo de tamanhos e estilos que você deve usar.

O uso de um pequeno conjunto de tamanhos de fontes por todo o aplicativo, conforme recomendado pela diretriz da rampa de fontes, cria um senso de estrutura e ritmo no conteúdo. Se houver vários elementos que utilizam o mesmo tamanho de fonte na rampa de fontes, mas transmitem tipos diferentes de informações, considere o uso de cores, espessuras e estilos de fontes para estabelecer uma hierarquia de informações. O exemplo a seguir mostra como você pode usar tamanhos, cores e espessuras de fontes para criar esse tipo de hierarquia.

Exemplo de tamanhos de fontes e uma hierarquia de informações

Veja o tópico sobre diretrizes e lista de verificação para texto e tipografia para saber mais sobre práticas recomendadas de fontes, como tamanhos, cores e espessuras.

Grau de atualização do conteúdo

Em cenários de notícias, é essencial que o conteúdo do seu aplicativo seja sempre recente e atual. Vamos examinar os elementos que indicam o grau de atualização para os seus usuários.

Hora em que o conteúdo foi atualizado pela última vez

Exibir informações sobre a última atualização para o usuário cria confiança integridade do seu aplicativo de notícias. Mostre informações sobre a última atualização na tela de maneira discreto. Essas informações devem ser exibidas ao estilo de informações terciárias (9 pontos) para a rampa de fontes. Veja um exemplo.

Exemplo que demonstra o grau de atualização do conteúdo

Hora de postagem do artigo

Mostrar quando um artigo foi postado é outra maneira comum de manter os usuários informados sobre o grau de atualização do conteúdo que eles estão lendo. Para esses tipos de carimbo de data/hora, use o estilo de informações terciárias da rampa de fontes e use cores e espessuras diferentes para diferenciar essas informações do restante do conteúdo do layout que possa estar usando a mesma rampa de fontes.

Atualizando o conteúdo

Aplicativos de notícias sempre devem mostrar o conteúdo mais atual. Para garantir que o conteúdo no seu aplicativo se mantenha atualizado, baixe dados de maneira oportunista. Por exemplo, enquanto o usuário estiver lendo um artigo, baixe novos conteúdos na página de hub de forma que, quando ele retornar a essa página, ela esteja atualizada. Porém, não baixe dados em tela de fundo enquanto o usuário usar uma conexão móvel sem fio, pois os aplicativos devem minimizar o uso de dados em tela de fundo enquanto estiverem em roaming ou usando banda larga móvel.

Além disso, verifique se o aplicativo é capaz de lidar com cenários offline, notificando os usuários quando o conteúdo não estiver disponível offline.

Se o seu aplicativo precisar atualizar conteúdo para uma página na qual o usuário se encontra no momento, indique o progresso na parte superior da tela que não está sendo atualizada, conforme descrito no tópico sobre diretrizes e lista de verificação para controles de progresso. Além disso, use animações para inserir novo conteúdo e remova o conteúdo antigo da tela, conforme descrito no tópico sobre diretrizes e lista de verificação para animações de lista. A imagem a seguir mostra um exemplo com a barra de progresso na parte superior da imagem.

Exemplo de barra de progresso

Se o seu aplicativo de notícias não tiver atualizado seu conteúdo após um certo tempo, e o usuário alternar para esse conteúdo, considere obscurecer o conteúdo antigo e mostrar o progresso na tela para indicar que um grande volume de conteúdo está sendo atualizado.

Verifique se o aplicativo está responsivo mesmo durante a atualização do conteúdo. Além disso, se a conexão for fraca, defina um valor de tempo limite e exiba a interface do usuário offline do seu aplicativo. A imagem a seguir mostra o conteúdo da página de hub que está sendo obscurecido durante uma atualização.

Exemplo mostrando que o conteúdo está sendo atualizado

Conectados e dinâmicos

Blocos e notificações permitem que o conteúdo mais atual seja exibido quando os usuários se encontram na tela inicial. Usando esses recursos, você pode criar uma conexão com o usuário e tornar o seu aplicativo dinâmico com atividades.

Blocos e notificações

Mostrar as notícias mais atualizadas e recentes em blocos mantém os usuários envolvidos e faz com eles retornem continuamente ao seu aplicativo ao descobrirem notícias interessantes no bloco do aplicativo. Veja a seguir um exemplo de bloco de aplicativo que exibe uma manchete de notícia.

Exemplos de como o bloco do seu aplicativo pode chamar a atenção dos usuários

Permitir que os usuários fixem novos blocos de categorias à tela inicial possibilita que eles vejam notificações adaptadas a essas categorias e acessem rapidamente o tipo de notícia específico no qual estão interessados. Isso é outro meio de chamar a atenção dos usuários de volta ao seu aplicativo.

Se você permitir que os usuários optem por receber notificações do sistema sobre as notícias mais atuais, que serão exibidas mesmo que o aplicativo não esteja em execução, será possível manter os usuários mais entusiastas sempre atualizados sobre as notícias mais atuais, além de os atrair para o seu aplicativo. Essa deve ser uma configuração opcional que o usuário pode habilitar através das configurações do aplicativo no botão Configurações, uma vez que notificações não solicitadas podem incomodar os usuários que não tenham expressado interesse explícito em ver notificações do sistema relacionadas a noticias mais atuais. Veja a seguir um exemplo de notificação do sistema.

Exemplo de notificação do sistema

Mobilidade

Como a maioria das pessoas tem mais de um computador com Windows instalado, seu aplicativo de notícias pode oferecer aos usuários a experiência que eles esperam obter, proporcionando uma experiência consistente em todos os computadores com Windows. Você pode permitir a mobilidade de configurações do aplicativo, indicadores de artigos, categorias de notícias favoritas, preferências de leitura e outros dados no seu aplicativo que sejam úteis para os usuários em todos os seus computadores. Veja Diretrizes para mobilidade de dados de aplicativos para saber mais sobre as práticas recomendadas de mobilidade de dados de aplicativos.

Redimensionamento da janela

Com o Windows 8.1, os usuários podem realizar várias tarefas redimensionando as janelas para qualquer tamanho, até uma largura mínima, e colocando os aplicativos lado a lado na tela. Projetar seu aplicativo para funcionar bem com larguras estreitas é uma ótima forma de aumentar o tempo do aplicativo na tela e envolver os usuários por períodos maiores. Isso permite que os usuários realizem várias tarefas enquanto utilizam o aplicativo, mantendo-o na tela mesmo quando estão fazendo outras coisas.

Vários são os motivos que podem levar o usuário a redimensionar o seu aplicativo. Talvez existam links de saída dentro de um artigo, e o usuário quer abrir um novo link no navegador sem sair desse artigo. Talvez o usuário queira apenas aumentar o tamanho do outro aplicativo ao lado. Seja qual for o motivo para redimensionar seu aplicativo, é importante que a ação de redimensionamento não perca de vista o artigo que o usuário estava lendo.

Quando o usuário redimensiona o aplicativo de forma que ele fique mais alto que largo, considere ajustar o fluxo das páginas para que elas tenham um movimento panorâmico vertical. Para saber mais sobre o redimensionamento de janelas, veja Diretrizes para redimensionamento de janelas e dimensionamento de telas.

Exemplos de aplicativos de notícias com larguras estreitas

Tela inicial

Conforme mencionado anteriormente, aplicativos de notícias devem baixar conteúdo atual frequentemente na Web. Para tornar seu aplicativo rápido e responsivo, não espere até que todas as imagens de cada categoria tenham sido baixadas antes de mostrar a página de aterrissagem. Essa espera pode deixar os usuários impacientes. Mostra ao usuário a página de hub do aplicativo assim que os títulos dos artigos tiverem sido baixados e depois carregue as imagens e os outros dados assincronamente.

Durante o curto período de espera pela exibição da página de hub, mostre sua tela inicial junto com uma mensagem informando aos usuários que o seu aplicativo está baixando conteúdo. Veja um exemplo.

Exemplo de tela inicial

Tópicos relacionados

Design de comandos para aplicativos da Windows Store

Conheça os aplicativos da Windows Store

Design de navegação para aplicativos da Windows Store

Design de interação por toque

Diretrizes de UX para aplicativos da Windows Store