Edição especial do Windows 10 - 2015

Volume 30 - Número 11

Design da Interface do Usuário - Design Receptivo para Aplicativos Universais do Windows

Por Mike Jacobs | Windows 2015

Um aplicativo Universal do Windows pode ser executado em qualquer dispositivo baseado no Windows, seja no telefone, no tablet ou no computador. Você pode até criar aplicativos Universais do Windows que podem ser executados em dispositivos compactos, como os de uso pessoal ou eletrodomésticos. Você pode limitar o seu aplicativo a uma única categoria de dispositivos (por exemplo, dispositivos móveis) ou escolher disponibilizá-lo em todos os dispositivos que executam o Windows.

Projetar um aplicativo que faça sucesso em dispositivos tão diferentes pode ser um grande desafio. Como é que você pode projetar um aplicativo que forneça excelente experiência do usuário em dispositivos com tantos tamanhos de tela e métodos de entrada diferentes? Felizmente, a UWP (Plataforma Universal do Windows) fornece um conjunto de recursos internos e blocos de construção universais para ajudá-lo nisso. Este artigo descreve os recursos de design da UWP e faz recomendações para a criação de uma IU dinâmica que se adapta a diferentes dispositivos e fatores forma.

Vamos começar dando uma olhada em alguns recursos obtidos na criação de um aplicativo Universal do Windows. Você não precisa fazer nada para se beneficiar desses recursos; eles são internos na UWP.

Um deles é a colocação da plataforma em escala, o que otimiza a IU baseada no tipo de dispositivo com Windows utilizado. O sistema usa um algoritmo para regular a forma de exibição de controles, fontes e outros elementos de interface do usuário na tela. O algoritmo de colocação em escala leva em conta a distância de visualização e a densidade da tela (pixels por polegada) para otimizar de acordo com o tamanho percebido (em vez do tamanho físico). O algoritmo de colocação em escala garante que uma fonte de 24 pixels em um visor Surface Hub a três metros de distância seja tão legível para o usuário quanto uma fonte de 24 pixels em uma tela de smartphone de cinco polegadas a poucos centímetros de distância. Por causa desse sistema de colocação em escala, ao projetar seu aplicativo Universal do Windows, você está projetando com pixels relevantes, e não baseado em pixels físicos.

Outro recurso interno da UWP é a entrada universal permitida com interações inteligentes. Embora você possa projetar seus aplicativos para modos de entrada e dispositivos específicos, não existe essa obrigação. Isso porque os aplicativos Universais do Windows utilizam interações inteligentes por padrão. Assim, você pode projetar em torno de uma interação de cliques sem ter que definir se o clique vem de um mouse ou de um toque.

Blocos de construção universais

Além disso, a UWP disponibiliza blocos de construção úteis que facilitam o design de aplicativos para várias categorias de dispositivos. Esses blocos de construção incluem controles, estilos e modelos universais.

Os controles universais funcionam sem problemas em todos os dispositivos com Windows, de smartphones a visores Surface Hub. Eles executam desde controles de forma comuns, como botões de opção e caixas de texto, até controles sofisticados, como exibição em grade e em lista, o que pode gerar listas de itens de uma transmissão de dados e de um modelo. Esses controles reconhecem a entrada e implantam com o devido conjunto de funcionalidades de entrada, estados de evento e funcionalidades gerais para cada categoria de dispositivo.

A UWP também integra seus aplicativos com um conjunto padrão de estilos que otimiza a apresentação para cada fator forma em questão. Você pode personalizar os estilos padrão ou substituí-los completamente para criar experiências visuais únicas. Os estilos universais trazem uma gama de recursos, incluindo:

• Um conjunto de estilos que dá ao seu aplicativo a opção de um tema claro ou escuro automaticamente e que pode incorporar a preferência de cor do usuário nos detalhes
• Uma rampa de tipo baseado em Segoe que garante que o aplicativo terá um visual nítido em todos os dispositivos
• Animações padrão para interações
• Suporte automático para modos de alto contraste Esses estilos foram projetados pensando em alto contraste; portanto, quando um aplicativo é executado em um dispositivo no modo de alto contraste, ele será exibido adequadamente
• Suporte automático para outros idiomas. Os estilos padrão selecionam automaticamente a fonte correta para cada idioma com suporte do Windows. Você pode até usar vários idiomas no mesmo aplicativo e eles serão exibidos corretamente
• Suporte interno para leitura da direita para a esquerda

Por fim, a UWP fornece modelos universais para o Adobe Illustrator e para o Microsoft PowerPoint, além de conter tudo o que você precisa para começar a projetar aplicativos UWP. Esses modelos têm controles e layouts universais para cada classe de tamanho de dispositivo universal. Para baixar os modelos, vá até a seção Downloads de design do Centro de Desenvolvimento do Windows em bit.ly/1KHun6J.

Conheça os dispositivos

Para fornecer a melhor experiência do usuário possível em seus aplicativos, é essencial se familiarizar com as várias categorias de dispositivo com suporte da UWP. Ao projetar para um dispositivo específico, as principais considerações incluem como o aplicativo aparecerá nele, como e onde o usuário irá interagir com o dispositivo, quando e como o aplicativo será utilizado no dispositivo.

Smartphones O dispositivo de computação mais usado; os telefones podem são muito versáteis apesar do espaço limitado da tela e das entradas básicas. Os telefones estão disponíveis em uma variedade de tamanhos, a maioria indo das 4 às 6 polegadas diagonalmente; telefones com telas acima de 6 polegadas são chamados phablets. Embora as experiências de aplicativo nos phablets sejam semelhantes às em smartphones padrão, as telas maiores permitem algumas alterações importantes no consumo do conteúdo.

Telefones são usados principalmente na orientação retrato, principalmente devido à facilidade de se segurar o telefone com uma mão durante a interação. Experiências que funcionam bem na orientação paisagem incluem a visualização de fotos e de vídeo, a leitura de um livro e a composição de textos. Independentemente dos tamanhos e modos de uso, os telefones têm algumas características em comum. Eles são normalmente usados somente por uma pessoa, o dono do dispositivo, e costumam sempre estar à mão, guardados nos bolsos ou nas bolsas. Os telefones também são normalmente usados por breves períodos de tempo.

Os usuários interagem com seus telefones através de toque e voz. A maioria dos telefones tem câmera, microfone, sensor de movimento e de localização.

Tablets Os computadores tablet ultraportáteis preenchem a lacuna entre os telefones e os laptops. Normalmente equipados com telas touch, câmeras, microfones e acelerômetros, os tablets ostentam tamanhos de tela entre 7 e 13 polegadas. Assim como os telefones, os tablets são usados normalmente por somente uma pessoa, o dono. Eles são usados com maior frequência em casa e são usados por períodos mais longos que os telefones. Os usuários interagem com os tablets usando toque, canetas, às vezes um teclado e um mouse.

Computadores e laptops Os computadores com Windows incluem uma ampla gama de dispositivos e tamanhos de tela. Em geral, computadores e laptops podem exibir mais informações que telefones ou tablets. O tamanho médio de tela é 13 polegadas ou mais. Programas e aplicativos nos computadores e laptops costumam ser compartilhados, mas por um usuário de cada vez e normalmente por períodos mais longos. Os aplicativos podem ser exibidos em janelas e o tamanho é definido pelo usuário. Os usuários de computadores e laptops interagem com os aplicativos mais frequentemente usando mouse e teclado, mas vários laptops e alguns computadores dão suporte à interação por toque. Computadores e áreas de trabalho normalmente não têm muitos sensores internos como outros dispositivos; geralmente, eles têm somente uma câmera e um microfone.

Dispositivos Surface Hub O Microsoft Surface Hub é um dispositivo de tela ampla para colaboração em equipe, projetado para uso simultâneo por vários usuários. O Surface Hub está disponível com telas de 55 e 84 polegadas. Os aplicativos no Surface Hub têm uso compartilhado por breves períodos de tempo, por exemplo, em reuniões, e podem aparecer em um de quatro estados: preenchimento (exibição fixa que ocupa a área de apresentação), inteira (exibição em tela inteira padrão), ajustada (exibição variável que ocupa o lado esquerdo ou direito da área de apresentação) e tela de fundo (exibição oculta enquanto o aplicativo está em execução; disponível no selecionador de tarefas). O Surface Hub dá suporte a interações de toque, caneta, voz e teclado; também inclui câmera e microfone.

Dispositivos Internet das Coisas Windows Essa classe emergente é centrada em torno da integração de pequenos dispositivos eletrônicos, sensores e conectividade com objetos físicos. Esses dispositivos estão normalmente conectados através de uma rede à Internet para relatar os dados do mundo real que coletam e, algumas vezes, suas atuações. Um dispositivo pode não ter tela (um dispositivo “sem cabeça”) ou estar conectado a uma tela pequena (dispositivo “com cabeça”), de 3,5 polegadas ou menos. As entradas e os recursos do dispositivo podem variar bastante de dispositivo para dispositivo.

Projetar para dispositivos específicos

Já que o Windows funciona nos bastidores para garantir que a sua interface do usuário está legível e funciona em todos os dispositivos, você não precisa personalizar seu aplicativo para dispositivos ou tamanhos de tela específicos. No entanto, há momentos em que é interessante fazê-lo. Por exemplo, quando seu aplicativo é executado em um computador ou laptop, você pode querer mostrar conteúdo adicional que ficaria confuso na tela de um dispositivo menor, como um telefone.

Há várias maneiras de aprimorar seu aplicativo para tamanhos de tela específicos: algumas são fáceis e rápidas, outras exigem algum trabalho.

Vamos começar falando um pouco sobre pixels relevantes. Como disse anteriormente, ao projetar seu aplicativo Universal do Windows, você está projetando com pixels relevantes, e não baseado em pixels físicos. Os pixels relevantes permitem que você preste atenção no tamanho real percebido de um elemento de interface do usuário sem ter que se preocupar com a densidade do pixel ou com a distância de exibição de dispositivos diferentes. Por exemplo, ao projetar um elemento de 1x1 polegadas, ele parecerá ter aproximadamente 1 polegada em todos os dispositivos. Em uma tela extremamente larga com alta densidade de pixels, o elemento deve ter 200x200 pixels físicos; em um dispositivo menor, como um telefone, deve ter 150x150 pixels físicos.

Sendo assim, como isso influencia a forma como você projeta seu aplicativo? Você pode ignorar a densidade de pixels e a resolução de tela real durante o design. Projete para a resolução efetiva (a resolução em pixels relevantes) para uma classe de tamanho. Vou falar sobre resoluções de classe de tamanho com mais detalhes mais à frente neste artigo. Uma dica: Ao criar modelos de tela em programas de edição de imagem, não deixe de definir a configuração PPI para 72 e de definir as dimensões da imagem para a resolução real da classe de tamanho que é o seu objetivo.

Para garantir que o seu aplicativo ajuste a escala sem problemas, é essencial seguir a regra dos quatro: Ajuste seus designs para a grade de 4x4 pixels tornando suas margens, tamanhos e posições de elementos de interface do usuário, incluindo a posição do texto, múltiplos de quatro pixels relevantes. A Figura 1 mostra elementos de design que mapeiam para a grade de 4x4 pixels. O elemento de design sempre terá bordas nítidas e definidas. Por contraste, os elementos de design que não mapearem para a grade 4x4 terão bordas suaves e desfocadas em alguns dispositivos.

Figura 1 Alinhar para a grade de 4x4 pixels para a renderização de imagem e texto nítidos

Apesar desses recursos e funcionalidades, há momentos em que será mais interessante personalizar a interface do usuário de seu aplicativo para uma categoria de dispositivos específica. Por exemplo, pode ser mais proveitoso fazer um uso mais eficiente do espaço e reduzir os encargos de navegação dos usuários. Um aplicativo projetado para ter boa resolução em um dispositivo com uma tela pequena, como um telefone, poderá ser usado em um computador com tela muito maior, mas provavelmente haverá desperdício de espaço. Você pode personalizar o aplicativo para exibir mais conteúdo quando a tela ultrapassar determinado tamanho. Por exemplo, um aplicativo de compras pode exibir uma categoria de mercadorias de cada vez em um telefone, mas várias categorias e produtos simultaneamente em um computador ou laptop. Ao colocar mais conteúdo na tela, você reduz a quantidade de navegação que o usuário precisa fazer.

Outros cenários vêm à mente, por exemplo, quando você precisa aproveitar totalmente os recursos de um dispositivo. Os telefones provavelmente têm um sensor de localização e uma câmera; o computador pode não tê-los. Seu aplicativo pode detectar quais recursos estão disponíveis e habilitar recursos que os utilizem.

Por fim, você pode querer otimizá-los de acordo com a entrada. A biblioteca de controles universais funciona com todos os tipos de entrada (toque, caneta, teclado e mouse), mas você pode otimizar para determinados tipos de entrada recolocando seus elementos de interface do usuário. Por exemplo, se você colocar elementos de navegação na parte inferior da tela, o acesso ficará mais fácil para usuários de telefone, mas a maioria dos usuários de computador espera ver os elementos de navegação na parte superior da tela.

Técnicas de design dinâmico

Ao otimizar a interface do usuário de seu aplicativo para larguras de tela específicas, você estará criando um design dinâmico. Há várias técnicas de design dinâmico que você pode usar para personalizar a interface do usuário de seu aplicativo e tirar vantagem do estado real da tela e dos vários recursos disponíveis nos diferentes tipos de dispositivo. Há seis técnicas a se considerar: reposicionamento, redimensionamento, revelação, substituição e nova arquitetura.

O resposicionamento de elementos de interface do usuário é uma maneira de tirar o máximo proveito de cada dispositivo. Na Figura 2, o modo de exibição retrato em um telefone ou phablet precisa de uma interface do usuário com rolagem, já que somente um quadro inteiro é visível por vez. Quando o aplicativo converte para um tablet ou outro dispositivo que permite dois quadros inteiros na tela, seja na orientação retrato ou na paisagem, o quadro B pode se deslocar para ocupar um espaço dedicado. Se você estiver usando uma grade para posicionamento, poderá preferir usar a mesma grade quando os elementos de interface do usuário forem reposicionados.

Figura 2 Reposicionar quadros para tirar proveito de telas maiores

Você também pode otimizar o quadro redimensionando as margens e elementos de interface do usuário para tirar proveito de telas maiores ou menores. Isso permite que você aumente a experiência de leitura em uma tela maior, por exemplo, aumentando o quadro de conteúdo, abrindo espaço para mais texto ou reduzindo a necessidade de rolagem. Da mesma forma, diferentes tamanhos de quadro permitem a retransmissão de elementos de interface do usuário baseada no dispositivo e na orientação. Por exemplo, em uma tela maior, faz sentido usar contêineres maiores, adicionar colunas e gerar itens de lista de forma diferente do que é feito em um smartphone.

A revelação de elementos de interface do usuário é uma técnica avançada que pode revelar funcionalidades com suporte em um dispositivo específico, por exemplo, a câmera de um smartphone, ao mesmo tempo em que fornece opções para se tirar proveito de diferentes tamanhos e orientações de tela. Um exemplo comum de revelação de interface de usuário oculta se aplica aos controles do media player, em que o conjunto de botões é reduzido em dispositivos menores e expandido em dispositivos maiores. O media player em um computador, por exemplo, pode ter mais funcionalidades em tela do que em um telefone.

Parte da técnica exibir-e-ocultar inclui a escolha de quando exibir mais metadados. Quando há pouco espaço, é melhor mostrar uma quantidade mínima de metadados; já em um laptop ou em uma área de trabalho, é possível ver uma quantidade relevante de metadados aparente. Alguns exemplos de como lidar com a exibição ou ocultação de metadados incluem:

• Aplicativo Email: exibir o avatar do usuário
• Aplicativo Música: exibir mais informações sobre um álbum ou artista
• Aplicativo Vídeo: exibir mais informações sobre um filme ou show, como detalhes de elenco e produção
• Qualquer aplicativo: separar colunas e revelar mais detalhes
• Qualquer aplicativo: Colocar horizontalmente algo que esteja empilhado verticalmente; em dispositivos maiores, os itens de lista empilhados podem mudar para revelar linhas de itens de lista e colunas de metadados

As últimas duas técnicas de interface do usuário dinâmica são substituição e nova arquitetura. A técnica de substituição permite que você mude a interface do usuário para uma classe ou orientação de tamanho de dispositivo específica. Por exemplo, um dispositivo compacto pode exibir uma série empilhada de botões e, em uma tela maior, esses controles são substituídos por guias ao longo da parte superior da tela.

Por fim, você pode recolher ou separar a arquitetura de seu aplicativo para um melhor aproveitamento em dispositivos específicos. No exemplo da Figura 3, a ida do dispositivo à esquerda para o da direita demonstra a união das páginas. A imagem mostra um aplicativo de uso doméstico inteligente que, em uma tela maior, combina os controles e o painel de configurações na mesma tela. Em um dispositivo menor, os controles e configurações são exibidos em telas diferentes.

Figura 3 Refazendo a arquitetura da exibição do aplicativo para diferentes tamanhos de tela

Pontos de interrupção de design

A quantidade de tipos de dispositivo e tamanhos de tela no ecossistema do Windows 10 é muito grande para se preocupar com a otimização de sua interface do usuário para cada um. Assim, recomendamos que você projete para três larguras principais (também chamadas de pontos de interrupção): 320, 720 e 1024 pixels relevantes. A Figura 4 descreve os pontos de interrupção.

Figura 4 Pontos de interrupção de design para interface do usuário dinâmica

Ao projetar para pontos de interrupção específicos, considere a quantidade de espaço na tela disponível para o seu aplicativo (ou janela do aplicativo). Quando o aplicativo estiver em execução em tela inteira, a janela do aplicativo tem o mesmo tamanho da tela, mas, em outros casos, é menor.

Ao projetar para uma interface do usuário pequena, cada pixel conta; portanto, não há problema em ocultar funcionalidades não essenciais ao cenário principal colocando-as em um menu ou em uma barra de ferramentas. Também é uma boa ideia exibir uma coluna ou região de conteúdo de cada vez e usar um ícone para representar a pesquisa em vez de mostrar uma caixa de pesquisa.

Ao se mover para interfaces do usuário de tamanho médio, você pode tirar proveito do espaço adicional para exibir uma caixa de pesquisa (se houver) e exibir o conteúdo principal em duas colunas ou regiões. Ao se mover para uma interface do usuário maior, mais funcionalidades e conteúdo podem ser exibidos, reduzindo a quantidade de cliques e de interações de interface do usuário necessárias para alcançar o conteúdo ou executar ações.

Lembre-se de que uma largura de 320 pixels relevantes pode significar que o seu aplicativo está sendo executado em um telefone ou em uma janela pequena de um computador com tela grande; portanto, não deixe de considerar a entrada principal do dispositivo, mouse ou toque. Nos dispositivos de toque, você pode facilitar a navegação e a interação em dispositivos portáteis colocando elementos de navegação e de comando na parte inferior da tela, onde podem ser alcançados facilmente com o polegar. Ao usar um mouse, no entanto, os usuários esperam que os elementos de navegação apareçam na parte superior da tela. Seu aplicativo pode usar a propriedade Windows.UI.ViewManagement.UI­ViewSettings.UserInteractionMode para descobrir o dispositivo principal de entrada e ajustar a interface do usuário de acordo.

A Plataforma Universal do Windows viabiliza um espectro de dispositivos para seus aplicativos, de dispositivos de uso pessoal com telas minúsculas até o enorme Surface Hub. Ao implementar técnicas de design dinâmico e tirar proveito dos recursos internos e blocos de construção (controles e estilos) da plataforma, você pode criar uma interface do usuário com um visual excelente em dispositivos de todos os tamanhos e formas.

Mike Jacobstrabalha como desenvolvedor de conteúdo sênior para a Microsoft. Por muitos anos, ele documentou os aspectos gráficos e de apresentação das tecnologias Microsoft, do Direct2D até a Windows Presentation Foundation e Silverlight.

Agradecemos aos seguintes especialistas técnicos da Microsoft pela revisão e contribuição para este artigo: JeffArnold, Eugene Gavrilov, Ross Heeter, Chigusa Sansen, Joe Tobens e Mike Bottemiller (Murphy & Associates)
Jeff Arnold é lead de design sênior de Windows. Sua equipe trabalha junto com a equipe da Plataforma de Desenvolvedores para criar soluções criativas e tangíveis dentro da evolução da UWP.
Mike Bottemiller é um consultor sênior da Murphy & Associates que escreve para a Microsoft. Sua carreira abrange atuações que foram de teste de software, publicação de conteúdo a gerenciamento de projeto, até optar por escrever sobre design e experiência do usuário. Ele escreveu guias de design e artigos sobre Visual Studio, Xbox e aplicativos UWP.
Eugene Gavrilov
Ross Heeter é lead de design sênior na Microsoft. Ele é especialista em interações entre dispositivos, plataformas e entradas, tendo passado tempo na Xbox projetando painéis de console e experiências de SmartGlass Companion e Indie Games Creator’s Club. Atualmente, ele projeta experiências de apicativo para o Grupo Windows e Dispositivos.
Chigusa Sansen é gerente de programa sênior na Microsoft, tendo trabalhando com várias experiências de interface do usuário diferentes, de Windows CE a Windows Mobile, computadores, telefones, tablets e Xbox. Ela contribuiu para várias evoluções importantes de experiência do usuário que criaram o Windows Phone e o Windows 10 (UWP), do ponto de vista de estrutura de interface do usuário.
Joe Tobens é designer sênior na Microsoft. Ele projetou e documentou interfaces do usuário dinâmicas entre vários dispositivos e aplicativos para Windows 10. Atualmente, ele trabalha com entradas no Grupo Windows e Dispositivos.