Muito se fala do conceito de Mobile First. Uma das aplicações é o Design de Interface. Unindo a tecnologia chegamos as novas possibilidades que podem resultar em interativas e poderosas experiências de usuários. 

Há tempos a linguagem JavaScript está cada vez mais poderosa. Foi ela que evoluiu a disponibilização de APIs que podem ser utilizadas para a criação de interfaces ricas em ambientes mobiles.

Considerando que os números sobre mobile no Brasil são cada vez mais animadores, as empresas precisam considerar e adaptar seus negócios a essa realidade.

Recursos inovadores para o Design de Interface

A linguagem JavaScript, assim como o HTML 5, tem inúmeras APIs para integração mobile e, por conseguinte, nos permite desenhar e desenvolver recursos inovadores e criativos para os projetos.

Neste artigo, vamos ter uma visão sobre sete APIs e suas possibilidades. São elas:

1. Client-Side Storage;
2. Battery Status API;
3. Vibration API;
4. Proximity API;
5. Device Orientation API;
6. Web Notifications API;
7. Page Visibility.

Client-Side Storage

O dispositivo do usuário possibilita o salvamento de dados para uso mais efetivo, ou quando não se está conectado a internet. No passado recente recorríamos ao uso dos cookies. Hoje, as possibilidades são diversas: IndexedDB, WebSQL, localStorage e sessionStorage.

Um exemplo recente de uso desses métodos é o aplicativo web do WhatsApp. Ele armazena informações locais para consultas rápidas ou quando há perda de conexão.

Outra possibilidade é o uso para cachê ou aplicações offline. Mas, sem dúvida, é um caminho de menor dependência do servidor.

Battery Status API

A API sobre o status da bateria nos permite alertar o usuário para uma tomada de decisões. Além da informação sobre o status, é possível também saber se a bateria está sendo carregada, ou não.

Com essa possibilidade a página pode salvar a interação do usuário antes que a bateria acabe. Imagine o salvamento de formulários diversos, interações com carrinho de compras e várias outras. O recurso de Client-Side Storage é um grande parceiro.

Alertar o usuário também é um bom caminho para sugerir. Além de uma simpatia para com ele, nos possibilita não perder negócio no momento mais crítico da navegação.

Vibration API

O nome dessa API é bem sugestivo e (sim!) ela nos permite fazer o aparelho do usuário vibrar. Por favor, não aplique esse recurso em um loop infinito, risos.

Exemplos clássicos de uso são games ou quando se precisa chamar a atenção do usuário, por exemplo, quando o preenchimento de um formulário está errado e para alertar o usuário podemos vibrar o dispositivo.

A API aceita determinar o tempo, em milissegundos, de duração da vibração.

Proximity API

Dispositivos móveis estão constantemente próximos, ou não, a outros objetos ou partes do nosso corpo. Por exemplo, do rosto e do ouvido.

Sabe quando você pega o celular e o aproxima do rosto e a tela desbloqueia? Sabe quando você leva o celular ao ouvido e a tela escurece? São funcionalidades possíveis através da Proximity API.

Um outro exemplo é um player de música e a relação com a sua mão, ela seria o objeto neste caso. A música está tocando e você aproxima a mão ao dispositivo, ele reconhece o gesto e pausa a música.

A criatividade é o único limite de uso dessa e várias outras possibilidades.

Device Orientation API

Esta API permite sua interface responder ao evento de orientação do dispositivo e/ou quando ele está em movimento.

Todo dispositivo tem duas orientações: a retrato (portrait) e panorama (landscape). Elas são muito utilizadas no CSS para a implementação de responsividade dos elementos e também pode ser aproveitada em programação para usos diversos.

Os dispositivos tem um sensor chamado acelerômetro, o qual nos informa sobre o movimento. Tanto quando o movimento está acelerando ou desacelerando. Imagine sua landing page sobre produtos fitness interagindo com o usuário em uma atividade física.

Web Notifications API

Aplicativos mobile geralmente utilizam notificações para nos alertar sobre situações diversas. Através da Web Notifications API podemos ter uma padronização das notificações nas interfaces web, seja no mobile ou desktop.

Hoje, cada site costuma ter um padrão específico. Vide Facebook e LinkedIn, por exemplo. Esta API é um caminho para padronização sobre como implementar a funcionalidade, embora cada navegador de internet implementa seu estilo visual.

Você pode fazer uso desta API para se comunicar e engajar seu usuário de forma relevante e conduzi-lo para os próximos passos estratégicos do seu negócio, através da página e/ou etapa em que ele se encontra.

Page Visibility API

É muito comum ao navegarmos na internet, abrirmos dezenas de abas numa mesma janela do navegador. Sua aplicação pode consultar se a aba que está ativa, ou seja, visível para o usuário é a sua.

A Page Visibility API tem essa finalidade de permitir que sua aplicação verifique se a página está em uso pelo usuário. Com isso, as possibilidades são diversas: notificar o usuário de alguma ação de forma diferente, estando ativa ou não; paralisar um áudio, vídeo e slider, por exemplo.

Sobre compatibilidade

Você precisa considerar esses recursos como elementos adicionais e inovadores na sua interface e não deixá-la dependente deles. Assim, você não precisará se preocupar com compatibilidade e deixar o recurso somente para o navegador que o suportar.

Nem todos os navegadores suportam essa lista de novidades. Alguns o fazem de forma parcial, outros total. Minha sugestão é consultar o site “Can I use”. O site Can I Use lista a compatibilidade de funcionalidades JavaScript, HTML 5 e CSS 3 em relação aos navegadores de internet e suas respectivas versões.

Abaixo uma lista de links para você analisar cada API aqui citada:

• Client-side Storage;
• Battery Status;
• Vibration;
• Proximity;
• Device Orientation;
• Web Notifications;
• Page Visibility.

Conclusão

Designers de interface, profissionais de marketing e líderes de produtos precisam conhecer esses recursos para aumentar seu leque de opções e, consequentemente, inovar em suas criações.

Interface ricas, inteligentes e bem alinhadas com a atividade momentânea do usuário pode ser um grande aliado para a captação de leads e engajamento.

Você já tem algum case, ou referência, implementado com algum dos recursos aqui citados?