Guia de Boas Práticas para Desenvolvimento de Interface
e Interação para Desenvolvedores da Plataforma Android
Alternative Title: Good Practice Guide to Development of Interface
and Interaction for developers of the Android Platform
ã
RESUMO
Alguns estudos apontam que a preocupação no desenvolvimento de
interfaces contribui para o sucesso de um projeto de softwares para
dispositivos móveis. Neste sentido, a Apple detém um processo
rigoroso para aprovação das aplicações desenvolvidas por terceiros
para seus dispositivos em sua loja. Em contraponto ao que acontece
na Apple, os aplicativos desenvolvidos para sua loja de aplicativos,
não passam por nenhum processo de aprovação. No entanto,
mesmo com a publicação das diretrizes de projeto “Android
Design”, as mesmas são tratadas pela maioria dos desenvolvedores
como conselhos a serem seguidos, não como obrigações a serem
cumpridas como são tratados os aspectos de design e interação do
guia da Apple. Neste sentido, este trabalho apresenta um guia
apoiado em boas práticas relacionadas a elementos de interface e
de interação aplicadas na plataforma da Apple para
desenvolvedores da plataforma Android. O objetivo é reunir a
essência do guia da Apple sem perder as características do Android.
Palavras-Chave
Interface. UI Design. Android Design.
ABSTRACT
Some studies indicate that the concern in the development of
interfaces contributes to the success of a software project for mobile
devices. In this sense, Apple has a rigorous process for the approval
of third-party applications for their devices in your store. In contrast
to what happens at Apple, applications developed for its application
store, do not go through any approval process. However, even with
the publication of design guidelines "Android Design", they are
treated by most developers as advice to be followed, not as
obligations to be fulfilled as the aspects of design and interaction of
the Apple Guide are treated. Thus, this work presents a guide
supported on good practices related to interface elements and
interaction applied to the Apple platform Android platform
developers. The goal is to gather the essence of Apple's tab without
losing the Android features.
Categories and Subject Descriptors
Misc.; D.2 [Software Engineering]: Misc.
General Terms
Interface. UI Design. Android Design.
Permission to make digital or hard copies of all or part of this work for
personal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that copies
bear this notice and the full citation on the first page. To copy otherwise,
or republish, to post on servers or to redistribute to lists, requires prior
specific permission and/or a fee.
SBSI 2016, May 17–20, 2016, Florianópolis, Santa Catarina, Brazil.
Copyright SBC 2016.
Keywords
Interface. UI Design. Android Design.
1. INTRODUÇÃO
Em um mundo em que a tecnologia está cada vez mais presente na
vida das pessoas, seja em casa, em carros, nas ruas, e até mesmo
em nossa própria mão, podem ser citados diversos dispositivos,
como tablets, vídeo games, televisores e os smartphones que vem
se popularizando cada vez mais. Só em 2013, o envio de
smartphones pelo mundo chegou a um bilhão. Os aparelhos mais
procurados são os com telas grandes e os de baixo custo [1].
Através dos smartphones vem 80% dos acessos à internet, segundo
a [2], e do tempo total gasto nos smartphones, 89% são em
aplicativos. O uso de aplicações por usuários de smartphones pode
ser bem variado, segundo [3], boa parte usa para jogos, notícias,
mapas e navegação, redes sociais, música, entretenimento,
operações bancárias e outros. O mercado de aplicativos cresce no
mundo a cada ano com mais de 1,8 milhão de Apps disponíveis aos
usuários segundo [4].
Alguns estudos [5][6][7] apontam que a preocupação no
desenvolvimento de interfaces contribui para o sucesso de um
projeto de softwares para dispositivos móveis. No entanto, também
é sabido que desenvolvedores de software normalmente não têm o
conhecimento aprofundado sobre diversos aspectos de elaboração
de interface de usuário, a citar: usabilidade, ergonomia,
acessibilidade e demais conceitos de design centrado no usuário
[8]. Por sua vez, a Apple [9] detém um processo rigoroso para
aprovação das aplicações desenvolvidas por terceiros para seus
dispositivos em sua App Store. Segundo [9], o processo de
aprovação de aplicações na App Store existe para que a empresa
possa manter o status de qualidade conquistada junta aos seus
clientes. Neste sentido, a Apple [9] disponibiliza aos seus
desenvolvedores um guia chamado de “iOS Human Interface
Guidelines”. Neste guia são apresentados conceitos básicos de UI
Design, estratégias de design, tecnologias do Sistema iOS,
elementos de UI, entre outros. Cabe salientar que para que uma
aplicação seja aprovada no processo para ser comercializado na
App Store, é necessário que este passe por uma avaliação inicial em
relação ao cumprimento das recomendações presentes no guia de
interface da Apple, sendo que as principais causas de rejeições de
aplicações na App Store sejam devidas à violação as diretrizes
contidas no guia [10][11]. Também neste sentido, a Google [12]
apresenta um guia chamado de “Android Design”, que trata de
princípios básicos de design, materiais para design, dispositivos,
estilos, padrões, entre outros. Em contraponto do que acontece na
Apple, os aplicativos desenvolvidos para Play Store não passam por
nenhum processo de aprovação. Sendo assim, o guia da Google não
é imposto como obrigação em relação às observações nela feita
para o desenvolvimento de interface do usuário [13]. No entanto,
mesmo com a publicação das diretrizes de projeto “Android
Design”, as mesmas são tratadas pela maioria dos desenvolvedores
como conselhos a serem seguidos, não como obrigações a serem
cumpridas como são tratados os aspectos de design e interação do
guia da Apple [14]. Para [15], a postura da Google em cumprimento
das recomendações da guideline permite “liberdade de
criatividade”, sendo que um desenvolvedor pode optar em ignorar
completamente as diretrizes e criar o seu próprio design. [14]
contribui em destacar que a Google ainda carece de uma linguagem
de design focada na interface e interação do usuário. Para [14], a
guideline carece de sentido, coerência e uniformidade nos
elementos de interface do usuário. Além de haver relatos de que os
aplicativos disponibilizados na App Store apresentam maior
qualidade nas suas interfaces em relação os aplicativos da Google
Play [16]. Como resposta a esses problemas, existem propostas para
melhorias como a utilização de padrões de projetos [17][18],
interfaces adaptativas [19] e heurísticas [20][7]. No entanto,
diversos problemas ainda estão relacionados aos aspectos de
interface e interação com o usuário. Neste sentido, este trabalho
apresenta um guia apoiado em boas práticas relacionadas a
elementos de interface e de interação aplicadas na plataforma da
Apple para desenvolvedores da plataforma Android. Este trabalho
está estruturado na seguinte forma: na Seção 2, é apresentada a
fundamentação teórica. A seção 3, apresentada a metodologia de
pesquisa utilizada. Na Seção 4 é apresentada os resultados, sendo
este um Guia com boas práticas para desenvolvedores da
plataforma Android. E por fim, a Seção 5 apresenta as conclusões.
2. FUNDAMENTAÇÃO TEÓRICA
Esta seção apresenta as referências nas quais se norteia este
trabalho. Parte-se da reflexão sobre a importância de um bom
design de interface; Interações com o usuário de dispositivos
móveis; e, conclui-se com as características da plataforma de
dispositivos móveis.
2.1 Importância de um bom design de
interface
O design de uma interface é muito importante para o usuário [21],
pois os usuários ficam mais confortáveis em interagir com
interfaces que são fáceis de usar e entender e façam com que eles
consigam realizar suas tarefas com o mínimo de frustração. A
aparência de uma interface e o modo de navegação podem afetar
uma pessoa de várias formas. Por sua vez, se forem confusas e
ineficientes, dificultarão para as pessoas realizarem as tarefas que
gostariam, ou dependendo da aplicação, dificultará que as pessoas
façam seus trabalhos ou cometam erros. Interfaces mal projetadas
podem fazer com que pessoas se afastem do sistema
permanentemente, fiquem frustradas e podem aumentar o nível de
stress [21]. Para [21] a importância de um bom design pode ser
demonstrada de uma maneira interessante se tratando em termos
financeiros. Para as empresas, boas interfaces (no contexto deste
trabalho corresponde a presença das recomendações de usabilidade
apresentadas em [24]) podem trazer benefícios como satisfação do
trabalhador e maior produtividade. Economicamente, isso pode
trazer benefícios como custos mais baixos, levando em conta que
sistemas mais fáceis de usar requerem menos treinamento.
2.2 Interações com o usuário de dispositivos
móveis
Também chamado de design de interações, de acordo com [22], é
um item que tem um foco maior no usuário, e em como será seu
comportamento a partir do momento em que ele abre a aplicação.
São utilizados elementos da interface, como botões, tipografia,
efeitos sonoros, ícones e cores para o usuário interagir com estes e
manipular o conteúdo da aplicação. Uma aplicação móvel com uma
boa interface deve ter uma boa interação do usuário com a tela, para
que o mesmo possa fazer suas tarefas da melhor forma possível. A
interface é onde o conteúdo que o usuário está buscando é exibido,
mas é através de ferramentas ou dispositivos que o usuário precisa
interagir com o conteúdo que está sendo exibido na interface. No
caso de computadores, essa interação ocorre através do mouse e do
teclado com o conteúdo que é exibido em um monitor. Em
dispositivos móveis, na maioria deles existe apenas uma tela, que
não é usada somente para a exibição do conteúdo, mas também para
a interação do usuário com o mesmo. O que faz com que
desenvolvedores considerem ergonomia, gestos, transições e
específicos padrões de interações de cada plataforma.
2.3 Características da plataforma de
dispositivos móveis
Os dispositivos móveis têm suas características que podem ser
distintas dependendo da plataforma, no entanto algumas
características são similares. A plataforma iOS tem algumas
características únicas, devido a Apple ser rígida quanto a avaliação
de aplicativos antes de serem publicados, estes seguem um padrão
e qualidade, proporcionando uma ótima experiência ao usuário
[23]. Algumas características são similares às duas plataformas,
como modo de orientação da tela, transições entre telas e
aplicativos, e para a interação dos usuários com os aplicativos
existem gestos, ao invés de cliques.
3. METODOLOGIA DE PESQUISA
Este trabalho quanto aos objetivos pode ser enquadrado como uma
pesquisa exploratória. Quanto aos procedimentos técnicos, foi
utilizado a pesquisa bibliográfica e pesquisa documental, sendo este
a primeira etapa realizada. A primeira etapa, oportunizou conhecer
as guidelines para desenvolvimento de interface das plataformas,
iOS e Android. A segunda etapa consistiu no desenvolvimento do
Guia, produto deste trabalho. Uma posterior etapa, compreendeu
em uma avaliação preliminar do guia a partir da visão de
especialistas.
4. RESULTADOS
Nesta seção são apresentados os passos e processos adotados para
o desenvolvimento do guia de boas práticas para desenvolvimento
de interfaces para a plataforma Android. Para isso optou-se em
realizar uma comparação entre as recomendações da Apple
realizadas no “iOS Human Interface Guidelines” [9] e as
recomendações da Google no “Android Design” [12]. No guia [9],
são apresentados conceitos básicos de UI Design, estratégias de
design, tecnologias do Sistema iOS, elementos de UI, entre outros.
O guia [12] apresenta princípios básicos de design, materiais para
design, dispositivos, estilos, padrões, entre outros. Cabe dizer que,
houve a preocupação de seguir boas práticas que poderão ser
utilizadas na plataforma Android, e também não desrespeitam as
restrições adicionadas na nova versão do guia da Google. Para um
melhor entendimento para o desenvolvimento deste Guia, optou-se
em apresentar lado-a-lado as recomendações das plataformas iOS e
Android, organizada como (conforme retrata a Tabela 1): (i)
considerações básicas de UI (user interface) (6 recomendações);
(ii) estratégias de design (); e, (iii) elementos de UI. A User  Selecionador
Interface (UI), ou interface do usuário é a camada na qual o usuário  Barra de Progresso
interage com a aplicação, tudo o que o usuário deseja fazer com a  Controle de Recarga
aplicação, as tarefas que deseja executar, são feitos através de  Botão Segmentado
interações com a interface.  Slider
Tabela 1. Classificação e organização do Guia  Stepper
 Chaveador
Classificações Recomendações  Campo de Texto
 Conceitos Básicos para Interface
 Layout e Adaptatividade Para compor esta interface são utilizados elementos de interface,
Considerações
 Navegação em conjunto com padrões para uso dos mesmos, cores e tipografia.
básicas de UI
(user interface)  Interatividade e Feedback As estratégias de design consistem em vários componentes que são
 Animação utilizados para fazer com que a interface contenha os padrões e
 Cor e Tipografia elementos necessários para proporcionar uma boa experiência ao
 Integridade Estética e Consistência usuário. No entendimento da [9], integridade estética trata de
Estratégias de aspectos da aparência visual de um software aplicada na interação
 Manipulação Direta
design da sua interface. No entanto, este termo não é comumente utilizado
 Metáforas
na literatura, sendo que talvez o termo mais apropriado seria
 Barra de Status
usabilidade. A Tabela 2 apresenta um exemplo elaborado na
 Barra de Navegação
construção do Guia, onde é descrito as recomendações para a
 Barra de Ferramentas utilização da Barra de status. A norma ISO/IEC 9126-1 [24]
 Botões da Barra de Navegação e barra descreve que a usabilidade é composta de subcaracterísticas, sendo:
de Ferramentas aprensibilidade, a capacidade do produto de software de possibilitar
Elementos de
 Barra Tabulada que o usuário aprenda por si só a utilizar a aplicação;
UI
 Barra de Busca operacionalidade, onde o produto dá a possibilidade ao usuário de
 Barra de Escopo operá-lo e controlá-lo; inteligibilidade, sendo a capacidade do
 Indicador de Atividade software possibilitar o usuário de compreender se ele é apropriado
 Selecionador de Data para o seu uso; e atratividade, o quanto o software é atraente ao
 Paginador usuário.
Tabela 2. Elemento de Interface: Barra de Status (versão de desenvolvimento do guia)
Barra de Status
A Barra de status exibe informações importantes a respeito do dispositivo e do ambiente atual, como por exemplo, porcentagem de bateria,
data e hora ou sinal de comunicação.

IOS ANDROID

Usada para exibir informações importantes sobre o dispositivo e
o ambiente atual. Ex.: Hora, informações sobre bateria, sinal,
provedor, e outras informações do dispositivo que podem ou não
estar ativadas, como bluetooth ou wifi.
Características
 É transparente;
 Quando aparece está no topo da tela;
 Não deve ser criada uma barra de status customizada, ela
pode ser escondida para mostrar toda a aplicação, mas não
customizada.
 Evitar colocar conteúdo atrás da barra de status.
 Pensar bem antes de esconder a barra, pois o usuário deverá
sair da aplicação para ver informações que ele poderia ver
diretamente na barra, sendo que ela é transparente, não
precisa necessariamente ser escondida, a não ser para jogos
ou vídeos.
No Android, a barra de status tem basicamente as mesmas
funcionalidades das utilizadas pela Apple (status da bateria,
horário, wi-fi, bluetooth e sinal do celular), com uma diferença
que nela também são exibidas as notificações de aplicativos.
Características
 As mesmas características do IOS se aplicam aqui também.
 A cor da barra de status deve seguir a cor primária da
aplicação, só que mais forte, seguindo a tonalidade 700 de
variação, podendo também ser transparente dependendo da
aplicação.
 A barra de status exibe as notificações de aplicativos
através de ícones, estes que devem ser visualmente simples
evitando detalhes excessivos, facilitando assim com que o
usuário possa diferenciar os ícones que podem ali estar.
Estes ícones devem ser na cor branca com os detalhes
transparentes.

Recomendação do Guia
A barra de status deve estar obrigatoriamente posicionada na parte superior da tela. Deve-se seguir o padrão do material design para
definição da cor da barra (variação da tonalidade em 700 na escala de cor). A barra não deve ser customizada, no entanto pode ser ocultada
para uma melhora apresentação do conteúdo em rolagens para baixo, sendo restaurada quando houver rolagem da tela para cima. Em caso
de projetos de jogos ou apresentação de vídeos, para uma melhor imersão do usuário a barra de status poderá ser ocultada.
Por sua vez, a consistência em uma aplicação é aquilo que faz com
que o usuário possa interagir com diferentes partes da aplicação
com a mesma facilidade, e também consiga usar várias aplicações
diferentes com esta mesma facilidade. Uma aplicação consistente
não é uma cópia de outra, mas segue todos os padrões com os quais
os usuários já estão acostumados e confortáveis em interagir, que
são encontrados em outras aplicações, fazendo com que o App
proporcione uma experiência consistente. Por sua vez, são
elementos de interface aqueles que são utilizados para fazer a
interação do usuário com a interface, através dos componentes que
os usuários realizam as tarefas ou atingem o objetivo que desejam
com a App. Estes elementos podem ser botões, barras de tarefas ou
navegações, menus, ícones, etc.
5. CONCLUSÃO
A partir da revisão bibliográfica, evidenciou-se que Android não
tem um cuidado tão grande em relação à interface e interação, em
contraste ao que acontece à plataforma da Apple. Entende-se que a
utilização deste guia no desenvolvimento de interfaces pode trazer
benefícios tanto para usuários como para desenvolvedores.
Observa-se que os desenvolvedores são beneficiados com
observações e/ou recomendações em diversas características de
qualidade, como também no uso de cada elemento da maneira
correta, permitindo assim também aumentar a produtividade do
desenvolvedor. Os benefícios para o usuário, estão relacionados ao
seguimento dos padrões e boas práticas de design e interface, assim,
apresentando certa qualidade implícita. Por sua vez, uma avaliação
do guia foi realizada utilizando o método GQM (Goal Question
Metrics) de [25], do ponto de vista de um especialista na área de
usabilidade de software. A avaliação demonstrou indícios de
viabilidade de uso do guia no desenvolvimento de aplicativos para
plataforma Android, e recomendações para melhoria da mesma.
Como próximo passo, destaca-se que uma revisão mais sistemática
no guia poderia melhorar as recomendações. Entende-se que
adicionar mais plataformas como o Windows Phone, poderia
contribuir com mais recomendações no guia. Outro ponto que
poderia ser considerado seria a utilização de ilustrações nas
recomendações, tanto as positivas (o que fazer), como nas negativas
(o que não fazer). Além disso, a utilização de exemplo e
contraexemplos poderia melhorar o guia. Também se recomenda a
realização de avaliações, tanto na perspectiva de especialista, como
desenvolvedores e usuários.
6. REFERÊNCIAS
[1] Pcworld, 1 billion smartphones shiped worldwide in 2013,
2013. Disponível em < http://goo.gl/tMV3Zf >. Acessado em
28/03/2015
[2] Smart Insights, Statistics on mobile usage and adoption to
inform your mobile marketing strategy, 2015. Disponível em
< http://goo.gl/paQFV>. Acessado em 28/03/2015
[3] Pew Research, The rise of apps culture, 2010. Disponível em
< http://goo.gl/Zwc5fK>. Acessado em 28/03/2015
[4] Sebrae, Aplicativos para celulares movem mercado
bilionário, 2014. Disponível em <http://goo.gl/tRp2zQ>.
Acessado em 28/03/2015
[5] Pereira, R. S., Costa, C. C., A importância do projeto de
interface no desenvolvimento, 2012. Disponível em <
http://goo.gl/1FJVcX>. Acessado em 28/03/2015
[6] Ellwanger, C., Santos, C. P., Moreira, G. J., Gamificação e
padrões de interface em dispositivos móveis: Uma aplicação
no contexto educacional, 2014. Disponível em <
https://goo.gl/Txjg5a>. Acessado em 08/12/2015
[7] Neto, O. J. M., Usabilidade da Interface de dispositivos
móveis: heurísticas e diretrizes para o design, 2013.
Dissertação de mestrado do Instituto de Ciências
Matemáticas e Computação – ICMC-USP. Disponível em
<http://goo.gl/JftkJi>. Acessado em 17/03/2015
[8] Runija, Pooja, Importance of user interface design for mobile
app success, 2014. Disponível em < https://goo.gl/9PRpbs>.
Acessado em 28/03/2015
[9] Apple, iOS Human Interface Guidelines, 2015. Disponível
em < https://goo.gl/Mmvw4d >. Acessado em 10/05/2015
[10] Woodridge, D., Schneider, M. 2012. O Negócio De Apps
Para IPhone E IPad - Criando E Comercializando Aplicativos
De Sucesso, Elsevier Editora: Rio de Janeiro
[11] Pilone, D., Pilone, T. 2013. Use a Cabeça! Desenvolvendo
para iPhone e iPad, 2 ed., Alta Books: Rio de Janeiro
[12] Google, Android Design, 2015. Disponível em
<http://goo.gl/Pd5g8>. Acessado em 17/03/2015
[13] Burton, M., Felker, D. 2014. Desenvolvimento de
Aplicativos Android para Leigos, Alta Books: Rio de Janeiro
[14] Falconer, Joel. What Will Android’s New Design Guidelines
Mean for the Platform? 2012. Disponível em <
http://goo.gl/iMnogt>. Acessado em 17/03/2015
[15] David, M., Murman, C., 2014. Designing Apps for Success:
Developing Consistent App Design Practices, Focal Press
[16] Komarov, A., Yermolayev. 2013. Designing For a Maturing
Android, Smashing Magazine. Disponível em
<http://goo.gl/Dse1wg>. Acessado em 17/03/2015
[17] Nunes, I.D., Correia, R.S., 2013. A Importância da
usabilidade no desenvolvimento de aplicativos para
dispositivos móveis. Disponível em <http://goo.gl/Fgt2r5>.
Acessado em 10/05/2015
[18] Unitid, Interaction designers, androidpatterns. Disponível em
<androidpatterns.com>. Acessado em 17/03/2015
[19] Júnior, M. A. P.; Castro, R. de O. 2011. Um estudo de caso
da plataforma Android com Interfaces Adaptativas, Revista
@LUMNI, Vol. 1 n. 1. Disponível em
<http://goo.gl/0DKIlP>. Acessado em 17/03/2015
[20] Rocha, L. C., et al., 2014. Heurísticas para avaliar a
usabilidade de aplicações móveis: estudo de caso para aulas
de campo em Geologia, In TISE 2014
[21] Stone et al,. 2004. User Interface Design and Evaluation,
Steve Krug. Disponível em <https://goo.gl/CQEdLz>.
Acessado em 10/05/2015
[22] Banga, C., Weinhold, J. 2014. Essential Mobile Interaction
Design, Pearson Education
[23] Dclick, Guideline iOS – Características da Plataforma – 1,
2012. Disponível em <http://goo.gl/Qyg8xM>. Acessado em
10/05/2015
[24] Abnt, Associação Brasileira De Normas Técnicas, NBR
ISO/IEC 9126-1: Engenharia de Software – Qualidade de
produto – parte 1: modelo de qualidade. Rio de Janeiro, 2003
[25] Basili, V., Caldiera, G., Rombach, H. D. Goal Question
Metric Approach, 1994, Encyclopedia of Software
Engineering, pp. 528-532, John Wiley & Sons, I