Design de Interação para Aplicativos Móveis

Prévia do material em texto

Design de interação para aplicações 
móveis
APRESENTAÇÃO
O desenvolvimento de aplicativos para dispositivos móveis requer um bom projeto de interação 
com os usuários. Isso porque, muitas vezes, a utilização será feita em dispositivos com um 
espaço limitado de tela, por exemplo.
Para apoiar a comunidade de desenvolvedores, os principais fabricantes de sistemas operativos 
para dispositivos móveis disponibilizam gratuitamente os seus guias de desenvolvimento 
(guidelines). Esses guias oferecem recomendações de padrão para vários itens da aplicação, com 
especial dedicação à interação com os usuários.
Nesta Unidade de Aprendizagem, você verá os principais guidelines de interação para 
desenvolvimento móvel, assim como os guidelines disponibilizadas para a plataforma Android 
da Google e iOS da Apple, além de como utilizá-los.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Identificar os principais guidelines de interação para desenvolvimento móvel.•
Classificar guidelines de interação para Android e iOS.•
Operacionalizar guidelines de interação para Android e iOS.•
DESAFIO
A interface de usuário é um tema central no desenvolvimento de aplicações móveis. Por isso, 
os guias disponibilizados pelos fabricantes das plataformas Android e Apple trazem muitas 
recomendações, as quais estão diretamente relacionadas a esse tema.
Você, como desenvolvedor de aplicativos, recebeu um novo projeto.
Veja a seguir: 
Identifique e justifique as recomendações que devem ser seguidas para evitar problemas com o 
público-alvo.
INFOGRÁFICO
Desenvolvedores costumam negligenciar a etapa de design de interface e prezar por investir o 
tempo em estruturas do core do aplicativo. Isso, apesar de muito comum, não deve acontecer.
A etapa de construção da interface com o usuário requer investimento e dedicação, afinal, uma 
interface mal projetada pode condenar a aceitação do produto. Para a construção de aplicativos 
na plataforma iOS da Apple, assim como na plataforma Android da Google, os guidelines de 
interação ajudam muito a alcançar o padrão aceitável.
Neste Infográfico, você vai ver as recomendações do guideline da Apple.
Conteúdo interativo disponível na plataforma de ensino!
CONTEÚDO DO LIVRO
A importância de construir aplicativos que facilitem a utilização é requisito fundamental em um 
projeto. Assim, algumas recomendações devem ser seguidas pelos desenvolvedores e, nesse 
contexto, os guias de interação dos fabricantes de sistemas operativos para dispositivos móveis 
são fundamentais.
No capítulo Design de interação para aplicações móveis, do livro Desenvolvimento para 
dispositivos móveis, base teórica desta Unidade de Aprendizagem, você vai ver como identificar 
e classificar os principais guidelines de interação para desenvolvimento móvel, além de como 
operacionalizá-los.
Bons estudos.
DESENVOLVIMENTO 
PARA DISPOSITIVOS 
MÓVEIS
Fabricio Machado da Silva
Design de interação para 
aplicações móveis
Objetivos de aprendizagem
Ao final deste texto, você será capaz de:
 � Identificar as principais guidelines de interação para desenvolvimento 
móvel.
 � Classificar guidelines de interação para Android e iOS.
 � Operacionalizar guidelines de interação para Android e iOS.
Introdução
O crescimento exponencial do mercado de aplicativos móveis torna cada 
vez mais desafiadora a criação dessas aplicações. Esses desafios estão 
relacionados a recursos físicos limitados, como central processing unit 
(CPU), memória, tela, dispositivos de entrada, bateria, entre outros. Além 
disso, algumas circunstâncias, como ambiente e contextos diversos com 
excesso de barulho e claridade, são complicações que também precisam 
ser gerenciadas nesse tipo de trabalho.
Neste capítulo, você vai conhecer os guias de desenvolvimento (di-
retrizes, ou guidelines) disponibilizados pelos principais fabricantes de 
sistemas operacionais para desenvolvimento em dispositivos móveis. 
Esses fabricantes são Google, com a plataforma Android, e Apple, com 
o iPhone Operative System (iOS). Além disso, você verá como classificar 
as diretrizes de interação para as respectivas plataformas e como opera-
cionalizar a interação nelas.
Principais diretrizes de desenvolvimento em 
dispositivos móveis
Para auxiliar os desenvolvedores, Google e Apple disponibilizam guias de 
recomendações para os desenvolvedores de aplicativos nessas plataformas. 
Essas diretrizes, ou guidelines, servem como referência para o design de apli-
cativos (ROCHA; BARANAUSKAS, 2003). Você verá a seguir as diretrizes 
da plataforma Android e iOS. A Figura 1 mostra um exemplo de interface de 
interação no iOS da Apple.
Figura 1. Exemplo de interface de interação no iOS.
Fonte: Data Entry... (2019, documento on-line).
Guidelines Android
Segundo o guia do desenvolvedor Android, os usuários de aplicativos dessa 
plataforma possuem uma expectativa alta em relação à aparência e ao com-
portamento, por isso é necessário que os desenvolvedores sigam não somente 
as diretrizes relacionadas aos padrões visuais e de navegação, mas também as 
de qualidade para compatibilidade, desempenho, segurança e outros.
Design de interação para aplicações móveis2
O foco neste texto são as diretrizes relacionadas aos padrões visuais, 
ou seja, as diretrizes de interação com os usuários. No Android elas estão 
classificadas em:
 � Usabilidade.
 � Animação.
 � Leiaute.
 � Padrão.
 � Estilo e componentes.
Guidelines iOS
No guia de desenvolvimento do iOS está escrito que, como designer de apli-
cativo, você tem a possibilidade de oferecer um produto extraordinário, que 
estará no topo dos gráficos da App Store, mas, para isso, é preciso atender às 
altas expectativas de qualidade e funcionalidade.
Para a Apple, três temas principais diferenciam a plataforma iOS de outras.
 � Clareza: em todo o sistema, o texto é legível em todos os tamanhos, os 
ícones são precisos e lúcidos, os adornos são sutis e apropriados. Um 
foco aguçado na funcionalidade motiva o design. Espaço negativo, cor, 
fontes, gráficos e elementos de interface realçam sutilmente conteúdos 
importantes e transmitem interatividade.
 � Deferência: movimento fluido e uma interface nítida e bonita ajudam as 
pessoas a entender e interagir com o conteúdo sem nunca competirem 
com ele. O conteúdo normalmente preenche a tela inteira, ao passo que 
a translucidez e o desfoque geralmente sugerem mais. O uso mínimo de 
painéis, gradientes e sombreados mantém a interface leve e ventilada, 
garantindo que o conteúdo tenha importância.
 � Profundidade: camadas visuais distintas e movimento realista trans-
mitem hierarquia e vitalidade e facilitam a compreensão. O toque e 
a capacidade de descoberta aumentam o prazer e permitem acesso 
e funcionalidade ao conteúdo adicional sem perder o contexto. As 
transições fornecem uma sensação de profundidade à medida que você 
navega pelo conteúdo.
3Design de interação para aplicações móveis
Wilson
Destacar
Uma característica importante para projetar e criar aplicativos para dispositivos móveis 
é que eles possuem um propósito bem específico. Ao contrário dos aplicativos para 
desktop, que em geral possuíam propósitos mais abrangentes, nos aplicativos para 
dispositivos móveis, há a oportunidade de trabalhar com aplicativos que resolvam 
problemas específicos, por isso tornam o desafio da interação entre homem e 
máquina mais interessante. 
Classificação de guidelines
Os padrões de interface são utilizados durante todo o seu ciclo de desenho, 
esses padrões ajudam os designers a traduzir as necessidades definidas para 
o aplicativo em estruturas e comportamentos esperados.
Esses padrões são chamados guidelines, que são regras construídas a partir 
de um conjunto de valores e crenças dos projetistas e designers, bem como 
na experiência em tentar atender a esses valores (relacionados a questões de 
comportamento, forma e conteúdo da interface).
Guia de interação Android – Material DesignO Material Design é um guia abrangente para design visual, de movimento 
e interação entre plataforma e dispositivos (MATERIAL..., 2019, documento 
on-line). Para usar o Material Design em seus aplicativos Android, você deve 
seguir as diretrizes definidas na sua especificação, e usar os novos componentes 
e estilos disponíveis na biblioteca de suporte do projeto de material.
O Material Design fornece os seguintes recursos para criação de aplicativos 
com padrões de interação com usuário:
 � um tema padrão para definir estilo visual de todos os widgets da in-
terface de usuário;
 � widgets para views complexas como listas;
 � application programming interfaces (APIs) novas para customizar 
sombras e animações.
Design de interação para aplicações móveis4
Para aproveitar os recursos do material, como padrão de estilos para widgets 
de interface de usuário, e simplificar a definição do estilo de aplicativo, você 
deve utilizar um tema baseado no guia de material para seu aplicativo (Figura 2).
Figura 2. Exemplo de temas diferentes no Android.
Fonte: Material... (2019, documento on-line).
Para fornecer aos seus usuários uma experiência mais familiar é necessário 
usar os padrões mais comuns do guia, seguindo as recomendações a seguir.
 � Permitir a ação principal da sua interface com um botão de ação 
flutuante.
 � Mostrar a sua marca, navegação, pesquisa e outras ações com a barra 
de aplicativos.
 � Mostrar e ocultar a navegação do seu aplicativo com a gaveta de 
navegação.
 � Usar um dos muitos componentes do Material Design para o leaiute e 
a navegação do aplicativo, como de barras de ferramentas, guias, barra 
de navegação inferior entre outras. Para ver todas, confira o catálogo 
de componentes de material para Android.
5Design de interação para aplicações móveis
Sempre que possível, use ícones de material predefinidos, como o botão "menu" de 
navegação da gaveta de navegação com o ícone "hambúrguer" padrão. Você também 
pode importar ícones do Scalable Vector Graphics (SVG) da biblioteca de ícones de 
materiais com o Vector Asset Studio do Android Studio.
Construindo uma user interface responsiva com o 
ConstraintLayout conforme Guia Desenvolvedor 
Android
O ConstraintLayout permite criar leiaute grandes e complexos com uma 
hierarquia de visualização simples (sem grupos de visualização aninhados). 
É semelhante ao RelativeLayout, pois todas as exibições são de acordo com 
os relacionamentos entre as exibições de irmãos e o leiaute pai, mas são mais 
flexíveis do que o RelativeLayout e mais fáceis de usar com o editor de leiaute 
do Android Studio.
O ConstraintLayout está disponível diretamente nas ferramentas visuais 
do editor de leiaute, porque a API de leiaute e o editor de leiaute foram es-
pecificamente construídos um para o outro. Assim, você pode construir seu 
leiaute com o ConstraintLayout arrastando e soltando, em vez de editar o XML.
O ConstraintLayout está disponível em uma biblioteca de APIs compatível 
com o Android 2.3 (nível 9 da API) e superior.
Para definir a posição de uma vista no ConstraintLayout, você deve adi-
cionar, pelo menos, uma restrição horizontal e uma vertical para a vista. Cada 
restrição representa uma conexão ou alinhamento para outra visualização, o 
leiaute pai ou uma diretriz invisível. Cada restrição define a posição da vista 
ao longo do eixo vertical ou horizontal. Portanto, cada visualização deve ter no 
mínimo uma restrição para cada eixo, mas, geralmente, são necessárias mais.
Quando você solta uma visualização no editor de leiaute, ela permanece 
onde você a deixa, mesmo que não tenha restrições. No entanto, isso é apenas 
para facilitar a edição; se uma visualização não tiver restrições quando você 
executar o leiaute em um dispositivo, ela será desenhada na posição [0,0] (o 
canto superior esquerdo).
Design de interação para aplicações móveis6
Na Figura 3, o leiaute fica bem no editor, mas não há restrição vertical na 
vista C. Quando esse leiaute é desenhado em um dispositivo, a visualização 
C alinha-se horizontalmente com as bordas esquerda e direita da vista A, mas 
aparece na parte superior da tela, porque não tem restrição vertical.
Figura 3. ConstraintLayout.
Fonte: Build... (2019, documento on-line).
Para usar o ConstraintLayout no seu projeto, proceda da seguinte maneira:
 � Verifique se você tem o repositório maven.google.com declarado em 
seu arquivo build.gradle de nível de módulo:
repositorios {
 Google()
}
 � Adicione a biblioteca como uma dependência no mesmo arquivo build.
gradle, conforme mostrado no exemplo a seguir. Observe que a versão 
mais recente pode ser diferente da mostrada no exemplo.
dependencias {
 implementacao 'com.android.support.constraint: constraint-
-layout: 1.1.2'
}
7Design de interação para aplicações móveis
 � Clique em Sincronizar projeto com arquivos Gradle na barra de ferra-
mentas ou na notificação de sincronização.
Agora você está pronto para construir seu leiaute com o ConstraintLayout. 
Para iniciar um novo arquivo de leiaute de restrição, siga as seguintes etapas:
 � Na janela Project, clique na pasta do módulo e selecione File> New> 
XML> Layout XML.
 � Digite um nome para o arquivo de layout e insira "android.sup-
port.constraint.ConstraintLayout" para a tag raiz.
 � Clique em Concluir.
Esse é um exemplo simplificado, mas útil e importante da utilização do 
padrão de design recomendado pelo guia do desenvolvedor do Android, uti-
lizando o ConstraintLayout.
Nos links a seguir você pode acessar os guias para desenvolvedor nos sistemas ope-
racionais iOS, da Apple, e Android, da Google.
https://qrgo.page.link/44YTi
https://qrgo.page.link/bNGty
O Guia do Microsoft Xamarim é uma Integrated Development Environment (IDE) de 
desenvolvimento mobile da Microsoft para plataformas Android e iOS.
https://qrgo.page.link/qV2mt
Design de interação para aplicações móveis8
BUILD a Responsive UI with ConstraintLayout. Android Developers, [S. l.], 2019. Disponível 
em: https://developer.android.com/training/constraint-layout/index.html. Acesso em: 
21 jul. 2019.
DATA ENTRY — User Interaction — iOS — Human Interface Guidelines. Apple, Cupertino, 
2019. Disponível em: https://developer.apple.com/design/human-interface-guidelines/
ios/user-interaction/data-entry/. Acesso em: 21 jul. 2019.
MATERIAL Design for Android. Android Developers, [S. l.], 2019. Disponível em: https://
developer.android.com/guide/topics/ui/look-and-feel. Acesso em: 21 jul. 2019.
ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e avaliação de interfaces humano-compu-
tador. Campinas: Instituto de Computação, Universidade Estadual de Campinas, 2003. 
257 p. Disponível em: https://www.nied.unicamp.br/biblioteca/design-e-avaliacao-
-de-interfaces-humano-computador/. Acesso em: 21 jul. 2019.
Leituras recomendadas
BURNETTE, E. Hello, Android: introducing Google's mobile development platform. 3. 
ed. Raleigh; Dallas: The Pragmatic Bookshelf, 2010. 293 p.
DEITEL, P.; DEITEL, H.; WALD, A. Android 6 para programadores: uma abordagem baseada 
em aplicativos. 3. ed. Porto Alegre: Bookman, 2016. 618 p.
DOCS | Node.js. OpenJS Foundation, [S. l.], 2019. Disponível em: https://nodejs.org/en/
docs/. Acesso em: 21 jul. 2019.
DOCUMENTATION — TypeScript. Microsoft, Redmond, 2019. Disponível em: https://
www.typescriptlang.org/docs/home.html. Acesso em: 21 jul. 2019.
INTRODUCTION to the Angular Docs. Google, Mountain View, 2019. Disponível em: 
https://angular.io/docs. Acesso em: 21 jul. 2019.
IONIC: Cross-Platform Mobile App Development. Ionic, Madison, 2019. Disponível em: 
https://ionicframework.com. Acesso em: 21 jul. 2019.
LEE, W. M. Beginning Android tablet application development. Indianapolis: Wrox, 2011. 
288 p.
NPM Documentation. npm, Inc., Oakland, 2019. Disponível em: https://docs.npmjs.
com/. Acesso em: 21 jul. 2019.
9Design de interação para aplicações móveis
DICA DO PROFESSOR
Para facilitar a comunicação do usuário com um aplicativo, este deverá oferecer uma interface 
intuitiva,a qual permita que o usuário execute as operações com facilidade. O guia do 
desenvolvedor do iOS oferece o UIView como recurso para facilitar o desenvolvimento de 
aplicativos nesse conceito.
Nesta Dica do Professor, você vai ver como se dá a utilização desse recurso.
Conteúdo interativo disponível na plataforma de ensino!
EXERCÍCIOS
1) A maioria dos desenvolvedores de sistemas operativos para aplicativos móveis 
fornecem guias de recomendação para aplicativos em suas plataformas. 
Sobre a finalidade desses guias, assinale a alternativa correta.
A) Apenas citam recomendações relacionadas à interface de usuário.
B) Esses guias oferecem boas práticas de interação disponíveis em cada IDE de 
desenvolvimento.
C) Citam recomendações sobre usabilidade geral.
D) É obrigatória a aplicação desses guias no desenvolvimento.
E) São guias pagos e oferecidos como complemento.
Segundo o próprio guia do desenvolvedor Android, os usuários de aplicativos nessa 
plataforma têm uma expectativa alta em relação à aparência e ao comportamento. 
2) 
Wilson
Destacar
Para isso, é necessário que os desenvolvedores sigam as diretrizes do guia. 
Assinale a alternativa que cita alguns exemplos dessas diretrizes.
A) Economia, usabilidade e animação.
B) Performance, layout e usabilidade.
C) Integração, layout e usabilidade.
D) Usabilidade, animação e layout.
E) Integração, economia e layout.
3) No guia de desenvolvimento do iOS, está escrito que, como designer de aplicativo, 
você tem a possibilidade de oferecer um produto extraordinário que estará no topo 
dos gráficos da App Store. Para isso, é preciso atender às altas expectativas de 
qualidade e funcionalidade.
Para a Apple, três temas principais diferenciam a plataforma iOS de outras. Assinale 
a alternativa correta sobre os três temas.
A) Clareza, deferência e profundidade.
B) Clareza, layout e profundidade.
C) Clareza, layout e desempenho.
D) Desempenho, profundidade e layout.
E) Profundidade, layout e animação.
Wilson
Destacar
Wilson
Destacar
Wilson
Destacar
4) Um dos temas abordados pela Apple é o conceito de profundidade. 
Sobre esse conceito, assinale a alternativa que está correta de acordo com o descrito 
no guia da Apple.
A) Está relacionado ao conceito de tamanho em 3D dos widgets.
B) São conceitos relacionados à profundidade do alcance da execução de um comando.
C) É um conceito relacionado à camada de desempenho do aplicativo.
D) São camadas visuais distintas que transmitem vitalidade e facilitam a compreensão.
E) É um conceito novo da Apple.
5) Segundo o guia do desenvolvedor Android, para fornecer aos usuários uma 
experiência mais familiar, é necessário usar os padrões mais comuns do guia. 
Assinale a alternativa correta sobre um dos padrões do guia.
A) Aproveitar os recursos de APIs disponibilizadas na comunidade.
B) Trabalhar com layout mínimo sem focar em outros requisitos.
C) Reaproveitar o código, facilitando a manutenção posterior.
D) Trabalhar com bibliotecas e padrões do fabricante do sistema operativo.
E) Mostrar e ocultar a navegação do seu aplicativo com a gaveta de navegação.
Wilson
Destacar
Wilson
Destacar
NA PRÁTICA
Uma das definições de usabilidade mais escutada é a facilidade com a qual indivíduos podem 
fazer uso de uma ferramenta ou objeto com o propósito específico de executar uma 
tarefa importante. Na Ciência da Computação, a palavra usabilidade remete à simplicidade e à 
facilidade com que um software é operado.
Neste Na Prática, você vai acompanhar como um desenvolvedor de aplicações pode utilizar o 
padrão do guia de usabilidade do Android para a criação de um Linear Layout, padrão de 
interface para interação com os usuários.
SAIBA MAIS
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do 
professor:
Design para Android
Neste link, você vai acessar o guia oficial do desenvolvedor para Android, disponível pela 
Google, com recomendações sobre design de interface de usuários. Confira.
Conteúdo interativo disponível na plataforma de ensino!
Human Interface Guidelines
Neste link, você vai ter acesso ao guia oficial do desenvolver para iOS, disponível pela Apple, 
com recomendações sobre design de interface de usuários. Confira.
Conteúdo interativo disponível na plataforma de ensino!
Projetando e criando aplicativos para dispositivos móveis
Neste site, você vai encontrar dicas de como projetar e criar o seu aplicativo para dispositivos 
móveis.
Conteúdo interativo disponível na plataforma de ensino!
UX e chatbots: boas práticas para desenhar interfaces conversacionais
Neste link, você vai ter acesso a um material simplificado com cinco dicas úteis para projetar a 
interface de usuário para dispositivos mobile.
Conteúdo interativo disponível na plataforma de ensino!
Wilson
Máquina de escrever
https://developer.android.com/design?hl=pt-br
Wilson
Máquina de escrever
https://developer.apple.com/design/human-interface-guidelines/
Wilson
Máquina de escrever
https://www.devmedia.com.br/projetando-e-criando-aplicativos-para-dispositivos-moveis/30671
Wilson
Máquina de escrever
https://brasil.uxdesign.cc/ux-e-chatbots-boas-pr%C3%A1ticas-para-desenhar-interfaces-conversacionais-9beb0ba293f2