Corais
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
- 3510 acessos
- Imprimir
- Imprimir toda a seção
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.
- 2286 acessos
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.
- 1816 acessos
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:
- 2140 acessos
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.
- 2256 acessos
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:
- 4806 acessos
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
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.
No mesmo aplicativo é possível enviar vídeos curtos, fotos e audios seguindo a mesma interação.
No iMessage é possível segurar para enviar stickers personalizados.
- 1710 acessos
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:
- 5017 acessos