Adaptive UI em Aplicativos Universais

A Adaptive UI da Microsoft é inspirada na Modern UI – Interfaces Modernas, que é baseada e fundamentada no equilíbrio, simetria e hierarquia. Inspirada na Bauhaus, uma escola de arte democrática que tinha o objetivo de formar profissionais de design e arquitetura que criassem soluções modernas e progressistas com base no racionalismo, e que ainda hoje está presente até na tecnologia. Com orientação artística da Bauhaus a Microsoft também crê que layouts devem ser racionalistas: toda forma deve ter uma função.

Ao começar o projeto de um aplicativo universal, seu primeiro trabalho é pensar nas funções: o que você deseja que seu projeto tenha, e qual a melhor forma de colocar isso para o usuário – informações estas que são levantadas através de pesquisas. Abuse da tipografia sugerida pelos designers e projetistas da Microsoft, e procure seguir suas orientações que destacarei a seguir.

As aplicações Universal Windows Platform são divididas em conteúdo, comando e navegação. O conteúdo é um dos elementos que mais causam dúvidas e discussões entre designers e desenvolvedores. Seguem algumas orientações sobre as boas práticas usando os conceitos de adaptação das interfaces para múltiplos aparelhos, os 6Rs: resize, reflow, reposition, reveal, replace e re-architect.

 

Resize (redimensione os itens na tela)

Redimensione o conteúdo ao tamanho da página, permitindo que o conteúdo aumente e diminua com as mudanças de tamanho da janela alterando a imagem proporcionalmente:

 

Reflow (refaça os fluxos)

Pense no tamanho do device e como as pessoas usam suas telas. Caso seu aplicativo tenha uma versão landscape (horizontal) e portrait (vertical), é importante que o conteúdo se ajuste a posição em que o dispositivo esteja, caso seu conteúdo vá para um monitor por exemplo, adicione colunas, aumente imagens e repense as interações para que o usuário possa usar o aparelho como mais gosta, e assim se sentir satisfeito com o seu aplicativo:

Reposition (reposicione os elementos na tela)

É possível mover blocos de conteúdo em torno da página. Altere a localização e posicionamento de elementos de interfaces para tirar melhor proveito do tamanho das telas de cada dispositivo. Neste caso é importante que a diagramação dos elementos dê boa leitura e passe fluidez para o usuário e respeite as interações naturais – NUI (Natural User Interface). Por exemplo, na versão horizontal, você pode ter ilhas de conteúdo que se estendem através da página, mas em um layout vertical, deve-se mover o conteúdo para uma única coluna:

 

Reveal (revele, mostre)

Sempre que seu conteúdo não couber na tela em que o usuário está, seja ele por ser muito pequeno ou por escolha de UI, deve-se indicar ou revelar ao usuário sobre o conteúdo que está “escondido”, assim como funcionalidades adicionais, situações específicas ou orientações de telas. Por exemplo, uma funcionalidade muito utilizada em telefones e phablets Windows são os cortes estratégicos das imagens que indicam swipe de conteúdo:

 

Replace (redesenhe, substitua)

Uma transição da interface que permite alternar o layout de um dispositivo: na classe, no tamanho e orientações específicas. Note na imagem de exemplo que há um item de menu no smartphone que fica dentro do menu hamburger, enquanto que no tablet ou desktop estes itens de menu ficam na barra de navegação, acima do conteúdo da aplicação. Com esta técnica, você consegue adaptar e substituir o wireframe de uma página dependendo do tamanho da tela, tudo isso para garantir um layout apropriado em todos os tamanhos:

 

Re-architect (re-arquitete)

É importante lembrar que cada dispositivo, além das especificidades dos tamanhos e telas, tem fluxos de navegação e interações próprias. Considere redesenhar seu aplicativo para que adapte bem o conteúdo ao device. Em termos de XAML – linguagem para criação de user interface das aplicações universal windows – isso geralmente significa que, a forma como o usuário interage com a tela no Xbox – que é através de um controle, difere da forma como ele interage com a tela no desktop ou no smartphone.

Todas as boas práticas, apesar de estarem voltadas para Aplicativos Universal Windows, são válidas para interfaces em geral, que lidam com diferentes tamanhos de tela.  Lembre-se, estas boas práticas são apenas o começo para que seu aplicativo seja amigável e tenha boas experiências, mas já garantem empatia com o usuário.