Destrinchando o Human Interface Guidelines para iOS — # 7

Ui Views

Um aplicativo, além de cumprir com a sua proposta, precisa se comunicar bem com o usuário e fazer conexões com outros aplicativos, uma UI View tem como o seu objetivo fornecer opções para o usuário.

Mas como isso funciona na prática?

Um bom exemplo é quando vamos excluir algo no nosso celular, caso você precise excluir um email no seu aplicativo de email (seja ele qual for, ex.: Gmail, Outlook, Mail, entre outros) uma mensagem de confirmação aparecerá mesmo depois que você já tenha tocado o botão de excluir uma vez. Isso serve para evitar que você exclua algo sem querer, evitando acidentes.

Entretanto o assunto não se resumem ao exemplo dado acima, por isso vamos falar das 13 formas que UI View aparecem para o usuário e algumas dicas de como usá-las.

1. Action Sheets

É um tipo particular de alerta que aparece em resposta a uma ação feita no app, é usada para iniciar tarefas ou confirmar a execução de uma atividade irreversível.

Action Sheets

A Apple sugere algumas práticas:

• Sempre fornecer o botão cancelar;
• Dar destaque às ações destrutivas (colocando-as em vermelho e na primeira opção de cima para baixo)
• Sempre confirme duas vezes uma ação destrutiva
• Evite adicionar scrolling (rolagem) em uma Action Sheet.

2 Activity Views

Uma atividade como copiar, favoritar ou compartilhar são usadas o tempo todo, o Activity Views serve para facilitar essas e outras atividades. O iOS já traz algumas opções padrão como copiar, duplicar ou reproduzir via Air Play. O seu app pode mostrar algumas opções de compartilhamento ou até mesmo atalhos para uma tarefa dentro da aplicação.

Activity View

Aqui vão algumas dicas da Apple:

• Faça imagens simples para representar atividades personalizadas.
• Construa bons títulos para representar sucintamente as suas tarefas.
• Tenha certeza que a ação sugerida está no contexto correto.

Use o botão de ação para mostrar o Activity View

3 Alerts

Alertas são mensagens importantes de um aplicativo, eles aparecem em pop ups na tela com uma mensagem e um ou mais botões, um bom exemplo é quando você instala um app e este pede permissão para te notificar, você tem a opção de aceitar ou não o envio de notificações.

É interessante usar minimamente os alertas para que eles não passem a incomodar o usuário e continuar com sua devida importância, é importante testar também a visualização deste alerta nas duas orientações do aparelho.

Boas Praticas para títulos e mensagens:

• Tente resumir ao máximo a descrição do seu alerta
• Evite que seu alerta soe como acusatório ou insultante ( você pode fazer isso evitando usar pronomes pessoais)
• Evite explicar o que cada botão faz (escolha uma descrição clara do alerta e títulos de fácil entendimento)

Boas Praticas para os Botões dos Alertas

• Tente usar apenas duas opções de botões
• Posicione as opções da maneira que as pessoas esperam (geralmente botões com mais propensão de toque ficam à direita e o botão de cancelar deve estar sempre à esquerda)
• Um botão de cancelamento deve sempre se chamar “Cancelar” (Nunca use aspas no título dos seu botões)
• Identifique bem os botões que resultam em ações destrutivas
• Permita que o botão “Home” do iPhone cancele um alerta.

4 Collections

Coleções são um conjunto de arquivos organizados com um padrão (como data por exemplo), um exemplo disso é como você vê suas fotos no no iPhone.

Collections

Collections suportam animações e interações, por padrão do sistema você toca para selecionar, toque e segure para editar e deslize para rolar.

Dicas

• Evite criar mudanças radicais no Design de uma Collection quando o Layout padrão já é suficiente
• Considere usar uma Table (Falaremos deste tópico mais a frente) ao invés de uma Collection quando se tratar de Texto
• Use as mudanças dinâmicas de Layout com cuidado.

5 Image View

Uma Image View é destinada para visualização de imagens, ela automaticamente encaixa a imagem na tela de acordo com o seu tamanho e permite que o usuário de zoom com o movimento de pinça e que ele passe entre as fotos de uma coleção deslizando o dedo sob a tela.

Dica

• Se possível, assegure que cada imagem se ajuste individualmente de acordo com o seu tamanho.

6 Maps

A visualização de mapa mostra a geolocalização do seu aparelho em relação ao mapa. Seu app pode usa-lo por exemplo para mostrar a localização de uma loja.

Dicas

• Mantenha o mapa interativo
• Use cores esperadas pelo usuário (vermelho para o destino, verde para a partida e roxo para um local escolhido pelo usuário)

7 Pages

As animações de transições de páginas fazem parte do conceito de trazer metáforas para o sistema da apple, assim quando se passa um página de um documento no iPhone ou iPad você pode ver a transição que simula um página real sendo folheada.

8 Popovers

Os popovers são telas que aparecem por cima da interface para controlar alguma função específica do app, como criar um novo evento no app Calendário para iPad. Esse comportamento ocorre geralmente em dispositivos de tela muito grande como o iPad, pois o conteúdo do popover é muito pouco para ocupar a tela inteira como é o caso da mesma ação de criar um novo evento no iPhone.

Para sair de um Popover basta tocar qualquer área fora deste.

Dicas

• Evite usar popovers no iPhone
• Salvar automaticamente quando o usuário fechar um popover
• Posicione os popover de forma coerente na tela (Geralmente os popovers surgem de um determinado botão, então ele deve aparecer na tela diretamente do ponto em que foi chamado)
• Mostre um popover por vez
• Não mostre nenhuma tela por cima de um popover (Exceto uma notificação)
• Deixe que o usualio consiga fechar um popover e abrir outro com apenas um toque.
• Evite fazer um popover muito grande.
• Você pode customizar seu popover, só tome cuidado para não fazê-lo parecer outra coisa.
• Gere uma transição suave.

9 Scroll Views

Uma Scroll View e qualquer tela que continua além do que está sendo visualizado no dispositivo, como um texto ou imagem. O usuário navega pela Scroll View deslizando o dedo sob a tela, tocando e com o movimento de pinça.

Dicas

• Faça com que o zoom e os gestos se comportem naturalmente
• Considere mostrar o contador de página quando a Scroll View estiver no modo de Página.
• Não coloque uma Scroll View dentro de outra Scroll View
• Mostre uma Scoll View por vez

10 Split Views

Esta view divide a tela em duas parte para mostrar um conteúdo de configuração, este tipo de visualização foi projetada para o iPad.

Dicas

• Faça um Layout que funcione bem para o seu conteúdo
• Não confunda esta visualização com a função multi tarefa do iPad
• Geralmente se restringe a navegação em apenas um lado da Split Screen por vez
• Enfatize constantemente qual a Split View ativa para o usuário

11 Tables

As tabelas do iOS forma projetadas para mostrar configurações dividida em telas, elas são basicamente o lado esquerdo de uma split view.

Dicas

• Defina uma hierarquia de carregamento do conteúdo menos pesado, como texto, até o mais pesado, como as imagens, o carregamento gradativo dá ideia de velocidade.
• Mostre o progresso enquanto o usuário navega nas camadas das Table Views

12 Text View

Como o nome já diz são vizualizações de texto, é importante pensar em alguns detalhes para o usuário:

• Mantenha o texto legível, evite usar múltiplas fontes e fontes que dificultem a leitura.
• Mostre o teclado certo para cada tipo de conteúdo, por exemplo: se o campo a ser preenchido só precisa de número, então o ideal é mostrar um teclado númerico

13 Web View

As Web Views são mostradas quando um aplicativo acessa um site na internet sem direcionar o usuário para o Safari. Esta prática é boa para manter o engajamento dos usuários do app, quando o seu aplicativo permite que se acesse um conteúdo online sem usar o Safari, é mais fácil que o usuário volte para o app depois de ler o conteúdo.