Guia de Boas Prticas para Desenvolvimento de Interface
e Interao 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 preocupao no desenvolvimento de
interfaces contribui para o sucesso de um projeto de softwares para
dispositivos mveis. Neste sentido, a Apple detm um processo
rigoroso para aprovao das aplicaes desenvolvidas por terceiros
para seus dispositivos em sua loja. Em contraponto ao que acontece
na Apple, os aplicativos desenvolvidos para sua loja de aplicativos,
no passam por nenhum processo de aprovao. No entanto,
mesmo com a publicao das diretrizes de projeto Android
Design, as mesmas so tratadas pela maioria dos desenvolvedores
como conselhos a serem seguidos, no como obrigaes a serem
cumpridas como so tratados os aspectos de design e interao do
guia da Apple. Neste sentido, este trabalho apresenta um guia
apoiado em boas prticas relacionadas a elementos de interface e
de interao aplicadas na plataforma da Apple para
desenvolvedores da plataforma Android. O objetivo reunir a
essncia do guia da Apple sem perder as caractersticas 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 1720, 2016, Florianpolis, Santa Catarina, Brazil.
Copyright SBC 2016.
Keywords
Interface. UI Design. Android Design.
1. INTRODUO
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 prpria mo, podem ser citados diversos dispositivos,
como tablets, vdeo games, televisores e os smartphones que vem
se popularizando cada vez mais. S em 2013, o envio de
smartphones pelo mundo chegou a um bilho. Os aparelhos mais
procurados so os com telas grandes e os de baixo custo [1].
Atravs dos smartphones vem 80% dos acessos internet, segundo
a [2], e do tempo total gasto nos smartphones, 89% so em
aplicativos. O uso de aplicaes por usurios de smartphones pode
ser bem variado, segundo [3], boa parte usa para jogos, notcias,
mapas e navegao, redes sociais, msica, entretenimento,
operaes bancrias e outros. O mercado de aplicativos cresce no
mundo a cada ano com mais de 1,8 milho de Apps disponveis aos
usurios segundo [4].
Alguns estudos [5][6][7] apontam que a preocupao no
desenvolvimento de interfaces contribui para o sucesso de um
projeto de softwares para dispositivos mveis. No entanto, tambm
sabido que desenvolvedores de software normalmente no tm o
conhecimento aprofundado sobre diversos aspectos de elaborao
de interface de usurio, a citar: usabilidade, ergonomia,
acessibilidade e demais conceitos de design centrado no usurio
[8]. Por sua vez, a Apple [9] detm um processo rigoroso para
aprovao das aplicaes desenvolvidas por terceiros para seus
dispositivos em sua App Store. Segundo [9], o processo de
aprovao de aplicaes 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 so apresentados conceitos bsicos de UI
Design, estratgias de design, tecnologias do Sistema iOS,
elementos de UI, entre outros. Cabe salientar que para que uma
aplicao seja aprovada no processo para ser comercializado na
App Store, necessrio que este passe por uma avaliao inicial em
relao ao cumprimento das recomendaes presentes no guia de
interface da Apple, sendo que as principais causas de rejeies de
aplicaes na App Store sejam devidas violao as diretrizes
contidas no guia [10][11]. Tambm neste sentido, a Google [12]
apresenta um guia chamado de Android Design, que trata de
princpios bsicos de design, materiais para design, dispositivos,
estilos, padres, entre outros. Em contraponto do que acontece na
Apple, os aplicativos desenvolvidos para Play Store no passam por
nenhum processo de aprovao. Sendo assim, o guia da Google no
imposto como obrigao em relao s observaes nela feita
para o desenvolvimento de interface do usurio [13]. No entanto,
mesmo com a publicao das diretrizes de projeto Android
Design, as mesmas so tratadas pela maioria dos desenvolvedores
como conselhos a serem seguidos, no como obrigaes a serem
cumpridas como so tratados os aspectos de design e interao do
guia da Apple [14]. Para [15], a postura da Google em cumprimento
das recomendaes da guideline permite liberdade de
criatividade, sendo que um desenvolvedor pode optar em ignorar
completamente as diretrizes e criar o seu prprio design. [14]
contribui em destacar que a Google ainda carece de uma linguagem
de design focada na interface e interao do usurio. Para [14], a
guideline carece de sentido, coerncia e uniformidade nos
elementos de interface do usurio. Alm de haver relatos de que os
aplicativos disponibilizados na App Store apresentam maior
qualidade nas suas interfaces em relao os aplicativos da Google
Play [16]. Como resposta a esses problemas, existem propostas para
melhorias como a utilizao de padres de projetos [17][18],
interfaces adaptativas [19] e heursticas [20][7]. No entanto,
diversos problemas ainda esto relacionados aos aspectos de
interface e interao com o usurio. Neste sentido, este trabalho
apresenta um guia apoiado em boas prticas relacionadas a
elementos de interface e de interao aplicadas na plataforma da
Apple para desenvolvedores da plataforma Android. Este trabalho
est estruturado na seguinte forma: na Seo 2, apresentada a
fundamentao terica. A seo 3, apresentada a metodologia de
pesquisa utilizada. Na Seo 4 apresentada os resultados, sendo
este um Guia com boas prticas para desenvolvedores da
plataforma Android. E por fim, a Seo 5 apresenta as concluses.
2. FUNDAMENTAO TERICA
Esta seo apresenta as referncias nas quais se norteia este
trabalho. Parte-se da reflexo sobre a importncia de um bom
design de interface; Interaes com o usurio de dispositivos
mveis; e, conclui-se com as caractersticas da plataforma de
dispositivos mveis.
2.1 Importncia de um bom design de
interface
O design de uma interface muito importante para o usurio [21],
pois os usurios ficam mais confortveis em interagir com
interfaces que so fceis de usar e entender e faam com que eles
consigam realizar suas tarefas com o mnimo de frustrao. A
aparncia de uma interface e o modo de navegao podem afetar
uma pessoa de vrias formas. Por sua vez, se forem confusas e
ineficientes, dificultaro para as pessoas realizarem as tarefas que
gostariam, ou dependendo da aplicao, dificultar que as pessoas
faam seus trabalhos ou cometam erros. Interfaces mal projetadas
podem fazer com que pessoas se afastem do sistema
permanentemente, fiquem frustradas e podem aumentar o nvel de
stress [21]. Para [21] a importncia 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 presena das recomendaes de usabilidade
apresentadas em [24]) podem trazer benefcios como satisfao do
trabalhador e maior produtividade. Economicamente, isso pode
trazer benefcios como custos mais baixos, levando em conta que
sistemas mais fceis de usar requerem menos treinamento.
2.2 Interaes com o usurio de dispositivos
mveis
Tambm chamado de design de interaes, de acordo com [22],
um item que tem um foco maior no usurio, e em como ser seu
comportamento a partir do momento em que ele abre a aplicao.
So utilizados elementos da interface, como botes, tipografia,
efeitos sonoros, cones e cores para o usurio interagir com estes e
manipular o contedo da aplicao. Uma aplicao mvel com uma
boa interface deve ter uma boa interao do usurio com a tela, para
que o mesmo possa fazer suas tarefas da melhor forma possvel. A
interface onde o contedo que o usurio est buscando exibido,
mas atravs de ferramentas ou dispositivos que o usurio precisa
interagir com o contedo que est sendo exibido na interface. No
caso de computadores, essa interao ocorre atravs do mouse e do
teclado com o contedo que exibido em um monitor. Em
dispositivos mveis, na maioria deles existe apenas uma tela, que
no usada somente para a exibio do contedo, mas tambm para
a interao do usurio com o mesmo. O que faz com que
desenvolvedores considerem ergonomia, gestos, transies e
especficos padres de interaes de cada plataforma.
2.3 Caractersticas da plataforma de
dispositivos mveis
Os dispositivos mveis tm suas caractersticas que podem ser
distintas dependendo da plataforma, no entanto algumas
caractersticas so similares. A plataforma iOS tem algumas
caractersticas nicas, devido a Apple ser rgida quanto a avaliao
de aplicativos antes de serem publicados, estes seguem um padro
e qualidade, proporcionando uma tima experincia ao usurio
[23]. Algumas caractersticas so similares s duas plataformas,
como modo de orientao da tela, transies entre telas e
aplicativos, e para a interao dos usurios com os aplicativos
existem gestos, ao invs de cliques.
3. METODOLOGIA DE PESQUISA
Este trabalho quanto aos objetivos pode ser enquadrado como uma
pesquisa exploratria. Quanto aos procedimentos tcnicos, foi
utilizado a pesquisa bibliogrfica 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 avaliao preliminar do guia a partir da viso de
especialistas.
4. RESULTADOS
Nesta seo so apresentados os passos e processos adotados para
o desenvolvimento do guia de boas prticas para desenvolvimento
de interfaces para a plataforma Android. Para isso optou-se em
realizar uma comparao entre as recomendaes da Apple
realizadas no iOS Human Interface Guidelines [9] e as
recomendaes da Google no Android Design [12]. No guia [9],
so apresentados conceitos bsicos de UI Design, estratgias de
design, tecnologias do Sistema iOS, elementos de UI, entre outros.
O guia [12] apresenta princpios bsicos de design, materiais para
design, dispositivos, estilos, padres, entre outros. Cabe dizer que,
houve a preocupao de seguir boas prticas que podero ser
utilizadas na plataforma Android, e tambm no desrespeitam as
restries adicionadas na nova verso do guia da Google. Para um
melhor entendimento para o desenvolvimento deste Guia, optou-se
em apresentar lado-a-lado as recomendaes das plataformas iOS e
Android, organizada como (conforme retrata a Tabela 1): (i)
consideraes bsicas de UI (user interface) (6 recomendaes);
(ii) estratgias de design (); e, (iii) elementos de UI. A User Selecionador
Interface (UI), ou interface do usurio a camada na qual o usurio Barra de Progresso
interage com a aplicao, tudo o que o usurio deseja fazer com a Controle de Recarga
aplicao, as tarefas que deseja executar, so feitos atravs de Boto Segmentado
interaes com a interface. Slider
Tabela 1. Classificao e organizao do Guia Stepper
Chaveador
Classificaes Recomendaes Campo de Texto
Conceitos Bsicos para Interface
Layout e Adaptatividade Para compor esta interface so utilizados elementos de interface,
Consideraes
Navegao em conjunto com padres para uso dos mesmos, cores e tipografia.
bsicas de UI
(user interface) Interatividade e Feedback As estratgias de design consistem em vrios componentes que so
Animao utilizados para fazer com que a interface contenha os padres e
Cor e Tipografia elementos necessrios para proporcionar uma boa experincia ao
Integridade Esttica e Consistncia usurio. No entendimento da [9], integridade esttica trata de
Estratgias de aspectos da aparncia visual de um software aplicada na interao
Manipulao Direta
design da sua interface. No entanto, este termo no comumente utilizado
Metforas
na literatura, sendo que talvez o termo mais apropriado seria
Barra de Status
usabilidade. A Tabela 2 apresenta um exemplo elaborado na
Barra de Navegao
construo do Guia, onde descrito as recomendaes para a
Barra de Ferramentas utilizao da Barra de status. A norma ISO/IEC 9126-1 [24]
Botes da Barra de Navegao e barra descreve que a usabilidade composta de subcaractersticas, sendo:
de Ferramentas aprensibilidade, a capacidade do produto de software de possibilitar
Elementos de
Barra Tabulada que o usurio aprenda por si s a utilizar a aplicao;
UI
Barra de Busca operacionalidade, onde o produto d a possibilidade ao usurio de
Barra de Escopo oper-lo e control-lo; inteligibilidade, sendo a capacidade do
Indicador de Atividade software possibilitar o usurio de compreender se ele apropriado
Selecionador de Data para o seu uso; e atratividade, o quanto o software atraente ao
Paginador usurio.
Tabela 2. Elemento de Interface: Barra de Status (verso de desenvolvimento do guia)
Barra de Status
A Barra de status exibe informaes importantes a respeito do dispositivo e do ambiente atual, como por exemplo, porcentagem de bateria,
data e hora ou sinal de comunicao.

IOS ANDROID

Usada para exibir informaes importantes sobre o dispositivo e
o ambiente atual. Ex.: Hora, informaes sobre bateria, sinal,
provedor, e outras informaes do dispositivo que podem ou no
estar ativadas, como bluetooth ou wifi.
Caractersticas
transparente;
Quando aparece est no topo da tela;
No deve ser criada uma barra de status customizada, ela
pode ser escondida para mostrar toda a aplicao, mas no
customizada.
Evitar colocar contedo atrs da barra de status.
Pensar bem antes de esconder a barra, pois o usurio dever
sair da aplicao para ver informaes que ele poderia ver
diretamente na barra, sendo que ela transparente, no
precisa necessariamente ser escondida, a no ser para jogos
ou vdeos.
No Android, a barra de status tem basicamente as mesmas
funcionalidades das utilizadas pela Apple (status da bateria,
horrio, wi-fi, bluetooth e sinal do celular), com uma diferena
que nela tambm so exibidas as notificaes de aplicativos.
Caractersticas
As mesmas caractersticas do IOS se aplicam aqui tambm.
A cor da barra de status deve seguir a cor primria da
aplicao, s que mais forte, seguindo a tonalidade 700 de
variao, podendo tambm ser transparente dependendo da
aplicao.
A barra de status exibe as notificaes de aplicativos
atravs de cones, estes que devem ser visualmente simples
evitando detalhes excessivos, facilitando assim com que o
usurio possa diferenciar os cones que podem ali estar.
Estes cones devem ser na cor branca com os detalhes
transparentes.

Recomendao do Guia
A barra de status deve estar obrigatoriamente posicionada na parte superior da tela. Deve-se seguir o padro do material design para
definio da cor da barra (variao da tonalidade em 700 na escala de cor). A barra no deve ser customizada, no entanto pode ser ocultada
para uma melhora apresentao do contedo em rolagens para baixo, sendo restaurada quando houver rolagem da tela para cima. Em caso
de projetos de jogos ou apresentao de vdeos, para uma melhor imerso do usurio a barra de status poder ser ocultada.
Por sua vez, a consistncia em uma aplicao aquilo que faz com
que o usurio possa interagir com diferentes partes da aplicao
com a mesma facilidade, e tambm consiga usar vrias aplicaes
diferentes com esta mesma facilidade. Uma aplicao consistente
no uma cpia de outra, mas segue todos os padres com os quais
os usurios j esto acostumados e confortveis em interagir, que
so encontrados em outras aplicaes, fazendo com que o App
proporcione uma experincia consistente. Por sua vez, so
elementos de interface aqueles que so utilizados para fazer a
interao do usurio com a interface, atravs dos componentes que
os usurios realizam as tarefas ou atingem o objetivo que desejam
com a App. Estes elementos podem ser botes, barras de tarefas ou
navegaes, menus, cones, etc.
5. CONCLUSO
A partir da reviso bibliogrfica, evidenciou-se que Android no
tem um cuidado to grande em relao interface e interao, em
contraste ao que acontece plataforma da Apple. Entende-se que a
utilizao deste guia no desenvolvimento de interfaces pode trazer
benefcios tanto para usurios como para desenvolvedores.
Observa-se que os desenvolvedores so beneficiados com
observaes e/ou recomendaes em diversas caractersticas de
qualidade, como tambm no uso de cada elemento da maneira
correta, permitindo assim tambm aumentar a produtividade do
desenvolvedor. Os benefcios para o usurio, esto relacionados ao
seguimento dos padres e boas prticas de design e interface, assim,
apresentando certa qualidade implcita. Por sua vez, uma avaliao
do guia foi realizada utilizando o mtodo GQM (Goal Question
Metrics) de [25], do ponto de vista de um especialista na rea de
usabilidade de software. A avaliao demonstrou indcios de
viabilidade de uso do guia no desenvolvimento de aplicativos para
plataforma Android, e recomendaes para melhoria da mesma.
Como prximo passo, destaca-se que uma reviso mais sistemtica
no guia poderia melhorar as recomendaes. Entende-se que
adicionar mais plataformas como o Windows Phone, poderia
contribuir com mais recomendaes no guia. Outro ponto que
poderia ser considerado seria a utilizao de ilustraes nas
recomendaes, tanto as positivas (o que fazer), como nas negativas
(o que no fazer). Alm disso, a utilizao de exemplo e
contraexemplos poderia melhorar o guia. Tambm se recomenda a
realizao de avaliaes, tanto na perspectiva de especialista, como
desenvolvedores e usurios.
6. REFERNCIAS
[1] Pcworld, 1 billion smartphones shiped worldwide in 2013,
2013. Disponvel 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. Disponvel em
< http://goo.gl/paQFV>. Acessado em 28/03/2015
[3] Pew Research, The rise of apps culture, 2010. Disponvel em
< http://goo.gl/Zwc5fK>. Acessado em 28/03/2015
[4] Sebrae, Aplicativos para celulares movem mercado
bilionrio, 2014. Disponvel em <http://goo.gl/tRp2zQ>.
Acessado em 28/03/2015
[5] Pereira, R. S., Costa, C. C., A importncia do projeto de
interface no desenvolvimento, 2012. Disponvel em <
http://goo.gl/1FJVcX>. Acessado em 28/03/2015
[6] Ellwanger, C., Santos, C. P., Moreira, G. J., Gamificao e
padres de interface em dispositivos mveis: Uma aplicao
no contexto educacional, 2014. Disponvel em <
https://goo.gl/Txjg5a>. Acessado em 08/12/2015
[7] Neto, O. J. M., Usabilidade da Interface de dispositivos
mveis: heursticas e diretrizes para o design, 2013.
Dissertao de mestrado do Instituto de Cincias
Matemticas e Computao ICMC-USP. Disponvel em
<http://goo.gl/JftkJi>. Acessado em 17/03/2015
[8] Runija, Pooja, Importance of user interface design for mobile
app success, 2014. Disponvel em < https://goo.gl/9PRpbs>.
Acessado em 28/03/2015
[9] Apple, iOS Human Interface Guidelines, 2015. Disponvel
em < https://goo.gl/Mmvw4d >. Acessado em 10/05/2015
[10] Woodridge, D., Schneider, M. 2012. O Negcio 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 Cabea! Desenvolvendo
para iPhone e iPad, 2 ed., Alta Books: Rio de Janeiro
[12] Google, Android Design, 2015. Disponvel 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 Androids New Design Guidelines
Mean for the Platform? 2012. Disponvel 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. Disponvel em
<http://goo.gl/Dse1wg>. Acessado em 17/03/2015
[17] Nunes, I.D., Correia, R.S., 2013. A Importncia da
usabilidade no desenvolvimento de aplicativos para
dispositivos mveis. Disponvel em <http://goo.gl/Fgt2r5>.
Acessado em 10/05/2015
[18] Unitid, Interaction designers, androidpatterns. Disponvel em
<androidpatterns.com>. Acessado em 17/03/2015
[19] Jnior, M. A. P.; Castro, R. de O. 2011. Um estudo de caso
da plataforma Android com Interfaces Adaptativas, Revista
@LUMNI, Vol. 1 n. 1. Disponvel em
<http://goo.gl/0DKIlP>. Acessado em 17/03/2015
[20] Rocha, L. C., et al., 2014. Heursticas para avaliar a
usabilidade de aplicaes mveis: estudo de caso para aulas
de campo em Geologia, In TISE 2014
[21] Stone et al,. 2004. User Interface Design and Evaluation,
Steve Krug. Disponvel 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 Caractersticas da Plataforma 1,
2012. Disponvel em <http://goo.gl/Qyg8xM>. Acessado em
10/05/2015
[24] Abnt, Associao Brasileira De Normas Tcnicas, 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