Você está na página 1de 4

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 Keywords
Alguns estudos apontam que a preocupao no desenvolvimento de Interface. UI Design. Android Design.
interfaces contribui para o sucesso de um projeto de softwares para
dispositivos mveis. Neste sentido, a Apple detm um processo 1. INTRODUO
rigoroso para aprovao das aplicaes desenvolvidas por terceiros Em um mundo em que a tecnologia est cada vez mais presente na
para seus dispositivos em sua loja. Em contraponto ao que acontece vida das pessoas, seja em casa, em carros, nas ruas, e at mesmo
na Apple, os aplicativos desenvolvidos para sua loja de aplicativos, em nossa prpria mo, podem ser citados diversos dispositivos,
no passam por nenhum processo de aprovao. No entanto, como tablets, vdeo games, televisores e os smartphones que vem
mesmo com a publicao das diretrizes de projeto Android se popularizando cada vez mais. S em 2013, o envio de
Design, as mesmas so tratadas pela maioria dos desenvolvedores smartphones pelo mundo chegou a um bilho. Os aparelhos mais
como conselhos a serem seguidos, no como obrigaes a serem procurados so os com telas grandes e os de baixo custo [1].
cumpridas como so tratados os aspectos de design e interao do Atravs dos smartphones vem 80% dos acessos internet, segundo
guia da Apple. Neste sentido, este trabalho apresenta um guia a [2], e do tempo total gasto nos smartphones, 89% so em
apoiado em boas prticas relacionadas a elementos de interface e aplicativos. O uso de aplicaes por usurios de smartphones pode
de interao aplicadas na plataforma da Apple para ser bem variado, segundo [3], boa parte usa para jogos, notcias,
desenvolvedores da plataforma Android. O objetivo reunir a mapas e navegao, redes sociais, msica, entretenimento,
essncia do guia da Apple sem perder as caractersticas do Android. operaes bancrias e outros. O mercado de aplicativos cresce no
mundo a cada ano com mais de 1,8 milho de Apps disponveis aos
Palavras-Chave usurios segundo [4].
Interface. UI Design. Android Design.
Alguns estudos [5][6][7] apontam que a preocupao no
ABSTRACT desenvolvimento de interfaces contribui para o sucesso de um
Some studies indicate that the concern in the development of projeto de softwares para dispositivos mveis. No entanto, tambm
interfaces contributes to the success of a software project for mobile sabido que desenvolvedores de software normalmente no tm o
devices. In this sense, Apple has a rigorous process for the approval conhecimento aprofundado sobre diversos aspectos de elaborao
of third-party applications for their devices in your store. In contrast de interface de usurio, a citar: usabilidade, ergonomia,
to what happens at Apple, applications developed for its application acessibilidade e demais conceitos de design centrado no usurio
store, do not go through any approval process. However, even with [8]. Por sua vez, a Apple [9] detm um processo rigoroso para
the publication of design guidelines "Android Design", they are aprovao das aplicaes desenvolvidas por terceiros para seus
treated by most developers as advice to be followed, not as dispositivos em sua App Store. Segundo [9], o processo de
obligations to be fulfilled as the aspects of design and interaction of aprovao de aplicaes na App Store existe para que a empresa
the Apple Guide are treated. Thus, this work presents a guide possa manter o status de qualidade conquistada junta aos seus
supported on good practices related to interface elements and clientes. Neste sentido, a Apple [9] disponibiliza aos seus
interaction applied to the Apple platform Android platform desenvolvedores um guia chamado de iOS Human Interface
developers. The goal is to gather the essence of Apple's tab without Guidelines. Neste guia so apresentados conceitos bsicos de UI
losing the Android features. Design, estratgias de design, tecnologias do Sistema iOS,
elementos de UI, entre outros. Cabe salientar que para que uma
Categories and Subject Descriptors aplicao seja aprovada no processo para ser comercializado na
Misc.; D.2 [Software Engineering]: Misc. App Store, necessrio que este passe por uma avaliao inicial em
relao ao cumprimento das recomendaes presentes no guia de
General Terms interface da Apple, sendo que as principais causas de rejeies de
Interface. UI Design. Android Design. aplicaes na App Store sejam devidas violao as diretrizes
contidas no guia [10][11]. Tambm neste sentido, a Google [12]
Permission to make digital or hard copies of all or part of this work for apresenta um guia chamado de Android Design, que trata de
personal or classroom use is granted without fee provided that copies are princpios bsicos de design, materiais para design, dispositivos,
not made or distributed for profit or commercial advantage and that copies
estilos, padres, entre outros. Em contraponto do que acontece na
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 Apple, os aplicativos desenvolvidos para Play Store no passam por
specific permission and/or a fee.
SBSI 2016, May 1720, 2016, Florianpolis, Santa Catarina, Brazil.
Copyright SBC 2016.
nenhum processo de aprovao. Sendo assim, o guia da Google no 2.2 Interaes com o usurio de dispositivos
imposto como obrigao em relao s observaes nela feita
para o desenvolvimento de interface do usurio [13]. No entanto, mveis
mesmo com a publicao das diretrizes de projeto Android Tambm chamado de design de interaes, de acordo com [22],
Design, as mesmas so tratadas pela maioria dos desenvolvedores um item que tem um foco maior no usurio, e em como ser seu
como conselhos a serem seguidos, no como obrigaes a serem comportamento a partir do momento em que ele abre a aplicao.
cumpridas como so tratados os aspectos de design e interao do So utilizados elementos da interface, como botes, tipografia,
guia da Apple [14]. Para [15], a postura da Google em cumprimento efeitos sonoros, cones e cores para o usurio interagir com estes e
das recomendaes da guideline permite liberdade de manipular o contedo da aplicao. Uma aplicao mvel com uma
criatividade, sendo que um desenvolvedor pode optar em ignorar boa interface deve ter uma boa interao do usurio com a tela, para
completamente as diretrizes e criar o seu prprio design. [14] que o mesmo possa fazer suas tarefas da melhor forma possvel. A
contribui em destacar que a Google ainda carece de uma linguagem interface onde o contedo que o usurio est buscando exibido,
de design focada na interface e interao do usurio. Para [14], a mas atravs de ferramentas ou dispositivos que o usurio precisa
guideline carece de sentido, coerncia e uniformidade nos interagir com o contedo que est sendo exibido na interface. No
elementos de interface do usurio. Alm de haver relatos de que os caso de computadores, essa interao ocorre atravs do mouse e do
aplicativos disponibilizados na App Store apresentam maior teclado com o contedo que exibido em um monitor. Em
qualidade nas suas interfaces em relao os aplicativos da Google dispositivos mveis, na maioria deles existe apenas uma tela, que
Play [16]. Como resposta a esses problemas, existem propostas para no usada somente para a exibio do contedo, mas tambm para
melhorias como a utilizao de padres de projetos [17][18], a interao do usurio com o mesmo. O que faz com que
interfaces adaptativas [19] e heursticas [20][7]. No entanto, desenvolvedores considerem ergonomia, gestos, transies e
diversos problemas ainda esto relacionados aos aspectos de especficos padres de interaes de cada plataforma.
interface e interao com o usurio. Neste sentido, este trabalho
apresenta um guia apoiado em boas prticas relacionadas a
2.3 Caractersticas da plataforma de
elementos de interface e de interao aplicadas na plataforma da dispositivos mveis
Apple para desenvolvedores da plataforma Android. Este trabalho Os dispositivos mveis tm suas caractersticas que podem ser
est estruturado na seguinte forma: na Seo 2, apresentada a distintas dependendo da plataforma, no entanto algumas
fundamentao terica. A seo 3, apresentada a metodologia de caractersticas so similares. A plataforma iOS tem algumas
pesquisa utilizada. Na Seo 4 apresentada os resultados, sendo caractersticas nicas, devido a Apple ser rgida quanto a avaliao
este um Guia com boas prticas para desenvolvedores da de aplicativos antes de serem publicados, estes seguem um padro
plataforma Android. E por fim, a Seo 5 apresenta as concluses. e qualidade, proporcionando uma tima experincia ao usurio
[23]. Algumas caractersticas so similares s duas plataformas,
2. FUNDAMENTAO TERICA como modo de orientao da tela, transies entre telas e
Esta seo apresenta as referncias nas quais se norteia este aplicativos, e para a interao dos usurios com os aplicativos
trabalho. Parte-se da reflexo sobre a importncia de um bom existem gestos, ao invs de cliques.
design de interface; Interaes com o usurio de dispositivos
mveis; e, conclui-se com as caractersticas da plataforma de 3. METODOLOGIA DE PESQUISA
dispositivos mveis. Este trabalho quanto aos objetivos pode ser enquadrado como uma
pesquisa exploratria. Quanto aos procedimentos tcnicos, foi
2.1 Importncia de um bom design de utilizado a pesquisa bibliogrfica e pesquisa documental, sendo este
interface a primeira etapa realizada. A primeira etapa, oportunizou conhecer
O design de uma interface muito importante para o usurio [21], as guidelines para desenvolvimento de interface das plataformas,
pois os usurios ficam mais confortveis em interagir com iOS e Android. A segunda etapa consistiu no desenvolvimento do
interfaces que so fceis de usar e entender e faam com que eles Guia, produto deste trabalho. Uma posterior etapa, compreendeu
consigam realizar suas tarefas com o mnimo de frustrao. A em uma avaliao preliminar do guia a partir da viso de
aparncia de uma interface e o modo de navegao podem afetar especialistas.
uma pessoa de vrias formas. Por sua vez, se forem confusas e
ineficientes, dificultaro para as pessoas realizarem as tarefas que
4. RESULTADOS
gostariam, ou dependendo da aplicao, dificultar que as pessoas Nesta seo so apresentados os passos e processos adotados para
faam seus trabalhos ou cometam erros. Interfaces mal projetadas o desenvolvimento do guia de boas prticas para desenvolvimento
podem fazer com que pessoas se afastem do sistema de interfaces para a plataforma Android. Para isso optou-se em
permanentemente, fiquem frustradas e podem aumentar o nvel de realizar uma comparao entre as recomendaes da Apple
stress [21]. Para [21] a importncia de um bom design pode ser realizadas no iOS Human Interface Guidelines [9] e as
recomendaes da Google no Android Design [12]. No guia [9],
demonstrada de uma maneira interessante se tratando em termos
financeiros. Para as empresas, boas interfaces (no contexto deste so apresentados conceitos bsicos de UI Design, estratgias de
trabalho corresponde a presena das recomendaes de usabilidade design, tecnologias do Sistema iOS, elementos de UI, entre outros.
apresentadas em [24]) podem trazer benefcios como satisfao do O guia [12] apresenta princpios bsicos de design, materiais para
trabalhador e maior produtividade. Economicamente, isso pode design, dispositivos, estilos, padres, entre outros. Cabe dizer que,
trazer benefcios como custos mais baixos, levando em conta que houve a preocupao de seguir boas prticas que podero ser
sistemas mais fceis de usar requerem menos treinamento. 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 No Android, a barra de status tem basicamente as mesmas
o ambiente atual. Ex.: Hora, informaes sobre bateria, sinal, funcionalidades das utilizadas pela Apple (status da bateria,
provedor, e outras informaes do dispositivo que podem ou no horrio, wi-fi, bluetooth e sinal do celular), com uma diferena
estar ativadas, como bluetooth ou wifi. que nela tambm so exibidas as notificaes de aplicativos.
Caractersticas Caractersticas
transparente; As mesmas caractersticas do IOS se aplicam aqui tambm.
Quando aparece est no topo da tela; A cor da barra de status deve seguir a cor primria da
No deve ser criada uma barra de status customizada, ela aplicao, s que mais forte, seguindo a tonalidade 700 de
pode ser escondida para mostrar toda a aplicao, mas no variao, podendo tambm ser transparente dependendo da
customizada. aplicao.
Evitar colocar contedo atrs da barra de status. A barra de status exibe as notificaes de aplicativos
Pensar bem antes de esconder a barra, pois o usurio dever atravs de cones, estes que devem ser visualmente simples
sair da aplicao para ver informaes que ele poderia ver evitando detalhes excessivos, facilitando assim com que o
diretamente na barra, sendo que ela transparente, no usurio possa diferenciar os cones que podem ali estar.
precisa necessariamente ser escondida, a no ser para jogos Estes cones devem ser na cor branca com os detalhes
ou vdeos. 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 [7] Neto, O. J. M., Usabilidade da Interface de dispositivos
que o usurio possa interagir com diferentes partes da aplicao mveis: heursticas e diretrizes para o design, 2013.
com a mesma facilidade, e tambm consiga usar vrias aplicaes Dissertao de mestrado do Instituto de Cincias
diferentes com esta mesma facilidade. Uma aplicao consistente Matemticas e Computao ICMC-USP. Disponvel em
no uma cpia de outra, mas segue todos os padres com os quais <http://goo.gl/JftkJi>. Acessado em 17/03/2015
os usurios j esto acostumados e confortveis em interagir, que [8] Runija, Pooja, Importance of user interface design for mobile
so encontrados em outras aplicaes, fazendo com que o App app success, 2014. Disponvel em < https://goo.gl/9PRpbs>.
proporcione uma experincia consistente. Por sua vez, so Acessado em 28/03/2015
elementos de interface aqueles que so utilizados para fazer a
interao do usurio com a interface, atravs dos componentes que [9] Apple, iOS Human Interface Guidelines, 2015. Disponvel
os usurios realizam as tarefas ou atingem o objetivo que desejam em < https://goo.gl/Mmvw4d >. Acessado em 10/05/2015
com a App. Estes elementos podem ser botes, barras de tarefas ou [10] Woodridge, D., Schneider, M. 2012. O Negcio De Apps
navegaes, menus, cones, etc. Para IPhone E IPad - Criando E Comercializando Aplicativos
De Sucesso, Elsevier Editora: Rio de Janeiro
5. CONCLUSO
A partir da reviso bibliogrfica, evidenciou-se que Android no [11] Pilone, D., Pilone, T. 2013. Use a Cabea! Desenvolvendo
tem um cuidado to grande em relao interface e interao, em para iPhone e iPad, 2 ed., Alta Books: Rio de Janeiro
contraste ao que acontece plataforma da Apple. Entende-se que a [12] Google, Android Design, 2015. Disponvel em
utilizao deste guia no desenvolvimento de interfaces pode trazer <http://goo.gl/Pd5g8>. Acessado em 17/03/2015
benefcios tanto para usurios como para desenvolvedores. [13] Burton, M., Felker, D. 2014. Desenvolvimento de
Observa-se que os desenvolvedores so beneficiados com Aplicativos Android para Leigos, Alta Books: Rio de Janeiro
observaes e/ou recomendaes em diversas caractersticas de
qualidade, como tambm no uso de cada elemento da maneira [14] Falconer, Joel. What Will Androids New Design Guidelines
correta, permitindo assim tambm aumentar a produtividade do Mean for the Platform? 2012. Disponvel em <
desenvolvedor. Os benefcios para o usurio, esto relacionados ao http://goo.gl/iMnogt>. Acessado em 17/03/2015
seguimento dos padres e boas prticas de design e interface, assim, [15] David, M., Murman, C., 2014. Designing Apps for Success:
apresentando certa qualidade implcita. Por sua vez, uma avaliao Developing Consistent App Design Practices, Focal Press
do guia foi realizada utilizando o mtodo GQM (Goal Question
[16] Komarov, A., Yermolayev. 2013. Designing For a Maturing
Metrics) de [25], do ponto de vista de um especialista na rea de
Android, Smashing Magazine. Disponvel em
usabilidade de software. A avaliao demonstrou indcios de
<http://goo.gl/Dse1wg>. Acessado em 17/03/2015
viabilidade de uso do guia no desenvolvimento de aplicativos para
plataforma Android, e recomendaes para melhoria da mesma. [17] Nunes, I.D., Correia, R.S., 2013. A Importncia da
Como prximo passo, destaca-se que uma reviso mais sistemtica usabilidade no desenvolvimento de aplicativos para
no guia poderia melhorar as recomendaes. Entende-se que dispositivos mveis. Disponvel em <http://goo.gl/Fgt2r5>.
adicionar mais plataformas como o Windows Phone, poderia Acessado em 10/05/2015
contribuir com mais recomendaes no guia. Outro ponto que [18] Unitid, Interaction designers, androidpatterns. Disponvel em
poderia ser considerado seria a utilizao de ilustraes nas <androidpatterns.com>. Acessado em 17/03/2015
recomendaes, tanto as positivas (o que fazer), como nas negativas
(o que no fazer). Alm disso, a utilizao de exemplo e [19] Jnior, M. A. P.; Castro, R. de O. 2011. Um estudo de caso
contraexemplos poderia melhorar o guia. Tambm se recomenda a da plataforma Android com Interfaces Adaptativas, Revista
realizao de avaliaes, tanto na perspectiva de especialista, como @LUMNI, Vol. 1 n. 1. Disponvel em
desenvolvedores e usurios. <http://goo.gl/0DKIlP>. Acessado em 17/03/2015
[20] Rocha, L. C., et al., 2014. Heursticas para avaliar a
6. REFERNCIAS usabilidade de aplicaes mveis: estudo de caso para aulas
[1] Pcworld, 1 billion smartphones shiped worldwide in 2013, de campo em Geologia, In TISE 2014
2013. Disponvel em < http://goo.gl/tMV3Zf >. Acessado em
28/03/2015 [21] Stone et al,. 2004. User Interface Design and Evaluation,
Steve Krug. Disponvel em <https://goo.gl/CQEdLz>.
[2] Smart Insights, Statistics on mobile usage and adoption to Acessado em 10/05/2015
inform your mobile marketing strategy, 2015. Disponvel em
< http://goo.gl/paQFV>. Acessado em 28/03/2015 [22] Banga, C., Weinhold, J. 2014. Essential Mobile Interaction
Design, Pearson Education
[3] Pew Research, The rise of apps culture, 2010. Disponvel em
< http://goo.gl/Zwc5fK>. Acessado em 28/03/2015 [23] Dclick, Guideline iOS Caractersticas da Plataforma 1,
2012. Disponvel em <http://goo.gl/Qyg8xM>. Acessado em
[4] Sebrae, Aplicativos para celulares movem mercado 10/05/2015
bilionrio, 2014. Disponvel em <http://goo.gl/tRp2zQ>.
Acessado em 28/03/2015 [24] Abnt, Associao Brasileira De Normas Tcnicas, NBR
ISO/IEC 9126-1: Engenharia de Software Qualidade de
[5] Pereira, R. S., Costa, C. C., A importncia do projeto de produto parte 1: modelo de qualidade. Rio de Janeiro, 2003
interface no desenvolvimento, 2012. Disponvel em <
http://goo.gl/1FJVcX>. Acessado em 28/03/2015 [25] Basili, V., Caldiera, G., Rombach, H. D. Goal Question
Metric Approach, 1994, Encyclopedia of Software
[6] Ellwanger, C., Santos, C. P., Moreira, G. J., Gamificao e Engineering, pp. 528-532, John Wiley & Sons, I
padres de interface em dispositivos mveis: Uma aplicao
no contexto educacional, 2014. Disponvel em <
https://goo.gl/Txjg5a>. Acessado em 08/12/2015