Padrões de interação mobile

Padrão de interação é uma estrutura recorrente em interfaces que possibilita diversas interações. O padrão de interação é um arranjo de elementos de interface frequentemente utilizado por designers. O padrão não é padrão porque uma autoridade o elegeu, mas porque uma comunidade reproduziu. Isso significa que ele pode deixar de ser reproduzido ou mudar com o tempo.

Por que os padrões mudam os designers precisam estar sempre se atualizando, navegando e observando as mudanças feitas por outros designers. Isso explica porque designers fiquem navegando a esmo pela web, utilizando redes sociais e outras diversões em horário de trabalho. Eles estão atualizando seu conhecimento sobre padrões.

Os conhecimentos aqui disponibilizados reúnem padrões de interação típicos em interfaces de aplicativos mobile para permitir atualização e discussão entre designers de interface.

Estrutura

A estrutura comum aos padrões aqui catalogados é:

  • Descrição
  • Contextos em que aparece
  • Como é projetado
  • Como é usado
  • Exemplos de interfaces

Action Sheets (IOS)

Apresentação

Action sheets são telas responsivas que aparecem depois de acionar uma ação ou comando. Parecem uma espécie de tela de alerta(popover) apresentando aproximadamente de 2 a 5 opções de comando relacionados ao contexto da ação realizada anteriormente.

Contextos em que aparece

Aparece em telas onde ações podem ser destrutivas ou perigosas, como apagar ou fechar algo.

Como é projetado

Actions sheets aparecem de maneira similar a uma tela de alerta, as opções ficam em destaque sobre um card de fundo branco ou cinza, e a tela de fundo fica esmaecida. 

A tipografia pode ser apresentada na cor vermelha, enquanto as demais opções estão na cor azul. Em outras situações podem estar com a tipografia apenas na cor azul.

Como é usado

É utilizado para a realizar ações como copiar, deletar, fechar, compartilhar, entre outros

Para exemplos ver anexos.

Pré-visualizarAnexoTamanho
action_sheets.png113.18 KB
action_sheets2.png30.3 KB
action_sheets3.png30.18 KB

Cards

Descrição:

Cards funcionam como uma forma de mostrar conteúdo, geralmente heterogeneo, para o usuário. Cards podem conter textos, imagens e um link sobre um mesmo tema. Podem ser organizados de forma vertical ou horizontal na tela.

Contextos em que aparece:

- Navegar por itens com elementos diferentes

- Em interfaces baseadas em descoberta

- Em interfaces focadas em eventos

Como é projetado

Os cards podem ser apresentados de formas variadas, geralmente para mostrar informações diferentes sobre um mesmo tema, como textos e imagens pra um evento, ou um estilo músical. Os cards podem ser organizados como um stream de informação comum, mas também podem se sobrepor como um deck virtual, rolando-os tanto vertical quanto horizontalmente. Os cards podem ter tamanhos diferentes tanto em altura, quanto em largura, variando de acordo com o conteudo disposto no card.

Como é usado

Dentro de um card podemos encontrar fotos e textos sobre um tema, assim como videos ou uma chamada pra algum evento. Cards devem ser usados para melhorar a navegação em interfaces com muito conteúdo a ser apresentado, separando pedaços desses conteudos por semelhança nesses cards. Podem ser manipulados, geralmente com um toque, aonde aumentam o seu tamanho ocupando a tela para apresentar as informações com maior detalhes, as vezes um maior pedaço de texto ou uma imagem que antes aparecia apenas até a metade. Costumam a ser muito ultilizados em interfaces que se baseiam em descobrir novos conteudos. Cards são similares as cartas do mundo real e são facilmente assimiladas pelo usuário, são formas praticas de mostrar conteúdos diferentes dentro de um mesmo aplicativo e transformar a experiência do uduário em algo mais familiar.

Pré-visualizarAnexoTamanho
img_0989.png269.06 KB
img_0990.png1006.52 KB
img_0991.png1.25 MB
img_0992.png906.94 KB

Carrossel

 

CARROSSEL

DESCRIÇÃO:
O carrossel se mostra como uma lista de elementos normalmente relacionados ao mesmo tópico, alinhados horizontalmente um ao lado do outro, onde parte do conteúdo total é escondido. 
CONTEXTOS EM QUE APARECE:
1. Revelar categorias
2. Guiar o usuário em páginas iniciais
COMO É PROJETADO:
Como mencionado acima, os elementos são dispostos horizontalmente. Normalmente, na parte superior da tela na qual ele se encontra. O carrossel pode conter uma imagem e um texto de título se referindo aquela figura, mas pode conter também só um texto, o que é menos comum. Com o gesto de arrastar pro lado, é possível ver o que há a mais no carrossel. 
COMO É USADO:
O carrossel é usado em casos onde é preciso que haja, na interface, uma quantia maior de categorias com informações dentro delas e, além disso, é necessário mostrá-las ao usuário de forma simples e sucinta. É também uma forma inteligente de comprimir um número maior de informações mas ao mesmo tempo dar ciência ao usuário de que elas estão de fato ali. É possível percebê-lo quase sempre aliado à uma ideia de busca, de estar claro que a partir dali existe uma série de opções.
EXEMPLOS DE INTERFACE:

      

Navegação – Rolagem Infinita

Rolagem infinita é um padrão de interação onde mais conteúdo é automaticamente carregado assim que o usuário chega ao final de uma tela.

Padrão muito utilizado por aplicativos e sites que têm abundância de conteúdo a ser apresentado, como Facebook, Instagram, Twitter e Pinterest.

Este padrão é projetado tendo em mente que menos espforço e precisão são necessários para rolar do que para tocar ou clicar. A rolagem infinita é uma boa maneira de reter a atenção do usuário porque há menos distração no fluxo de navegação: ele faz basicamente a mesma coisa do começo ao fim (que pode demorar a chegar, se tudo der certo).

Trata-se de um padrão de navegação bastante disseminado e usuários normalemente o usam como foi projetado.

Onboarding - Walkthrough

Descrição:

 O Onboarding - Walkthrough é também conhecido como tutorial, é usado por designers e desenvolvedores para ensinar o usuário como usar a sua aplicação passo a passo. 

Contexto em que aparece: 

Aparece na primeira vez que uma nova aplicação é aberta, geralmente de maneira imersiva, mostrando todo o conteúdo que o designer/desenvolvedor acha necessário para que o usuário consiga usufruir da aplicação.

Como é projetado: 

Como dito anteriormente o walktrough é projetado de uma maneira bastante didática e passo a passo para mostrar as funções da aplicação, o designer/desenvolvedor lista uma quantia de coisas que julga necessário para que o usuário aprenda e coloca logo na primeira interação possível. 

Como é usado: 

É usado pelo usuário para aprender como que funciona aquela nova aplicação, quais botões, funcionalidade e eventualmente configurações de idioma/preferências em geral, é usado como a primeira interação do usuário, na maioria das vezes de maneira imersiva para passar a experiência ali projetada.

Exemplo de Interface:

Segurar e enviar

Descrição

Interação rápida em que o usuário segura um elemento da interface (geralmente um botão) por um tempo variável e ao soltar é executada uma ação de envio automática.

Contexos em que aparece

Interfaces de chat.

Como é projetado

Essa opção geralmente é um botão visível no chat, para acesso rápido, posicionada ao lado do campo de texto da mensagem.

Como é usado

É usado quando são necessárias ações rápidas relacionadas a conversa, como enviar áudios, videos curtos, reações, etc.

Exemplos

Screenshot do aplicativo Messenger

Aplicativo Messenger (Facebook). Quanto mais você segura o botão de like, maior o sticker é enviado. Esse sticker também é variável, pode ser trocado por demais emojis.

img_7434.png

No mesmo aplicativo é possível enviar vídeos curtos, fotos e audios seguindo a mesma interação.

img_eb2e871fd199-1.jpegNo iMessage é possível segurar para enviar stickers personalizados.

Teclado virtual para inserir textos

Descrição:

Padrão de interação presente em praticamente todos os aplicativos mobile para inserção de input textual.

Contextos:

Telas para envio de mensagens em aplicações de mensagens e chats, campos de busca, inserir senhas, logins ou quaisquer input textual em qualquer tela de uma aplicação.

Como é projetado:

https://developer.apple.com/documentation/uikit/uikeyinput

Como é usado:

Ao clicar numa caixa para inserir texto, o teclado virutal aparece numa animação de baixo para cima, ocupando cerca de 1/3 da tela. O usuário pode então digitar seu texto e inserir emojis, bem como slecionar suas preferências de teclado e digitação. Ele pode confirmar ou cancelar o envio de seu input textual através da interação com botoões externos ao campo do teclado, definidos pelo designer dependendo do contexto da aplicação.

Exemplos de interface: 

Pré-visualizarAnexoTamanho
img_1642.png69.47 KB
img_1643.png63.45 KB