TCC Designmob Manueladoerr

Manuela Meurer Doerr
DesignMob: Proposta Metodolgica para Criao de Interfaces

Digitais para Dispositivos Mveis
Monografia apresentada ao curso de Bacharelado em Design

Digital da Universidade Federal de Pelotas, como requisito
parcial para concluso do mesmo, sob orientao do Prof.
Tobias Mlling.
Pelotas, 2014.
Orientador:
Tobias Mlling
Banca examinadora:
Guilherme da Rosa
Gabriela Zago
Agradecimentos
Primeiramente a Deus, por ser essencial em
minha vida.
minha me, Janice, por ser uma pessoa
maravilhosa, por admirar o meu trabalho e
por estar sempre disposta a me ajudar.
Ao professor e orientador, Tobias, por todos

os ensinamentos durante o curso, pelo empenho e motivao. Por acreditar no meu trabalho e me incentivar a crescer sempre.
Ao meu pai, Lus Fernando, por ser uma

pessoa extraordinria, por sempre estimular
minha criatividade e por acreditar no meu
potencial.
Ao professor Guilherme, por estar presente

desde o primeiro semestre, por ter me ensinado muito sobre design e, principalmente,
por ter me ensinado metodologia de projeto
de uma maneira extraordinria a ponto de
me incentivar a realizar a presente pesquisa.
minha irm, Lusa, que acredita no meu

trabalho e me incentiva todos os dias a seguir nessa profisso.
professora Gabriela, por aceitar fazer parte

dessa pesquisa e por contribuir com referenciais tericos.
Ao meu namorado, Douglas, por ser meu

porto seguro nos momentos que precisei e
por estar presente ao longo de todos esses
anos comigo.
Ao Francisco Zanetti, Isabela Rodrigues,

Luciana Gerhard, Leo Xavier e Jordana
Mascarenhas por disponibilizarem seu tempo com muita disposio e contribuirem
para esta pesquisa.
minha turma do curso de Direito, por me

ajudarem nas dificuldades do curso e por
tornarem minhas noites mais divertidas.
Aos marofas - Jssica, Bibiana, Lucas,
Eduardo, Ceci e especialmente ao Fernando
- pelo companheirismo e amizade durante
a graduao. Sem vocs no teria sido to
bom.
empresa Pingg pelo seu apoio, disponibilidade de tempo e dedicao para esta
pesquisa.
A todos que de alguma forma contribuiram
com a minha pesquisa, assim como aos que
compreenderam minha ausncia durante esses meses de pesquisa. Muito obrigada, sem
vocs nada disso seria possvel.
DOERR, Manuela Meurer. DESIGNMOB: PROPOSTA METODOLGICA PARA CRIAO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MVEIS. Pelotas: 2014. Monografia (Bacharelado
em Design Digital) - Universidade Federal de Pelotas, 2014. Pginas: 78.
DOERR, Manuela Meurer. DESIGNMOB: PROPOSTA METODOLGICA PARA CRIAO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MVEIS. Pelotas: 2014. Monografia (Bacharelado
em Design Digital) - Universidade Federal de Pelotas, 2014. Pginas: 78.
RESUMO
ABSTRACT
O presente trabalho tem como objetivo identificar as caractersticas e mtodos referentes

a projetos de interfaces digitais para dispositivos mveis a fim de adaptar a metodologia
projetual em design de James Jesse Garrett a uma metodologia para a criao de interfaces
digitais para dispositivos mveis, a DesignMob. Para realizar tal adaptao, efetuada uma
reviso bibliogrfica acerca de conceitos tericos relacionados ao design aplicado a mobile
bem como entrevistas com designers especialistas no mercado de trabalho, a fim de relacionar seu trabalho prtico com as teorias estudadas e assim analisar os dados obtidos e
construir a adaptao metodolgica baseada na academia e no mercado de trabalho. Como
resultado construdo um projeto de infogrfico interativo que apresenta a metodologia de
maneira sistemtica e didtica a fim de disseminar o contedo da pesquisa.
The present study aims to identify the characteristics and methods related to digital interface
projects for mobile devices in order to adapt the design methodology of Jesse James Garrett
into a methodology to develop of digital interfaces for mobile devices, the DesignMob. To perform such an adaptation a literature review is made over the theoretical concepts related to
design applied to mobile as well as interviews with expert designers of the from digital agencies in order to relate their practical work with the studied theories and thus analyze such data
obtained and build a methodological adaptation based on academic theories and the labor
market. As a result, an interactive infographic design is built to present a the methodology in a
systematic and didactic way, in order to to disseminate the contents of the search.
Key-words: Mobile devices, Project Metodology, Interface.

Palavras chave: Dispositivos Mveis, Metodologia de Projeto, Interface.
Lista de Figuras
Figura 1.
Esquema metodolgico. Fonte: MUNARI, Bruno, 2002, p.55.
Adaptao: da autora.
Figura 13.
Aplicativo Path. Fonte:
Google Play. Adaptao: da autora (2014).
Figura 28.
Sistemas de navegao.
Fonte: http://goo.gl/Hc3043 Adaptao: da
autora.
Figura 2.
(Garrett, 2003)
Diagrama Metodolgico
Figura 14.
diaqueri.es/
Erik Ford. Fonte: http://me-
Figura 3.
(Garrett, 2003)
Diagrama da Experincia
Figura 15.
diaqueri.es/
Figura 16.
mediaqueri.es/
Tres Colunas. Fonte: http://
Figura 17.
mediaqueri.es/
List Apart. Fonte: http://
Figura 5.
Aplicativo Easy Taxi.
Fonte: Google Play
Figura 18.
com
Twitter. Fonte: www.twitter.
Figura 31.
Gestos. Fonte: http://
static.lukew.com/TouchGestureCards.pdf
Adaptao: da autora.
Figura 6.
Aplicativo do facebook
como Native App e Web App. Fontes:
m.facebook.com; App Store, Google Play.
Adaptao: da autora.
Figura 19.
Google Play
Melissa WakeUp. Fonte:
Figura 32.
Figura 20.
App Store
Voice sem menu. Fonte:
Figura 33.
Processo da empresa do
profissional E. Fonte: Da autora (2014)
Figura 4.
Fluxograma (Garrett
2003) Fonte: http://goo.gl/gSVzr6
Adaptao: a autora.
Figura 7.
Mobile First. Fonte:
http://www.designinterativo.etc.br/wp-content/uploads/2013/02/Mobile-Firt.jpg
Nanoc. Fonte: http://me-
Play
Figura 24.
RunKeeper. Fonte: www.
mobile-patterns.com
Figura 30.
Aplicativo Gogobot. Fonte:
www.mobile-patterns.com Adaptao: da
autora.
Transies.
Figura 34.
Processo da empresa do
profissional D. Fonte: Da autora (2014)
Figura 8.
Tamanho de tela desktop
x smartphone. Fonte: Da autora (2014).
Figura 21.
App Store
Voice com menu. Fonte:
Figura 9.
Aplicativo Instagram.
Fonte: Google Play. Adaptao: da autora.
Figura 25.
Play
Chrome. Fonte: Google
Figura 36.
Estrutura DesignMob
Fonte: Da autora (2014)
Figura 10.
Site da South Weast.
Fonte: www.southwest.com Adaptao: da
autora.
Figura 22.
Lista de tens. Fonte: www.
mobile-patterns.com
Figura 11.
Projeto Google Glass.
Fonte: http://goo.gl/qIM0X5
Figura 12.
Usando o Celular com o
polegar. Fonte: http://goo.gl/gIoX5W
CandyCrush. Fonte:
Figura 23.
Twitter com rolagem infinita. Fonte: www.twitter.com
Figura 27.
Bradesco. Fonte: Google
Figura 42.
Telas internas DesignMob
Figura 29.
Tabela de densidade.
Fonte: http://screensiz.es/phone (2014)
Adaptao: da autora.
Figura 35.
Processo da empresa dos
profissionais B e C. Fonte: Da autora (2014)
Figura 26.
Google Play
Figura 41.
Telas DesignMob Fonte:
Da autora (2014)
Figura 37.
Tabela DesignMob Fonte:
Da autora (2014)
Figura 38.
Sitemap e wireframes do
projeto. Fonte: Da autora (2014)
Figura 39.
autora (2014)
Paleta de cores. Fonte: Da
Figura 40.
autora (2014)
DesignMob Fonte: Da
Lista de Quadros:
Quadro 1 Native App X Web App
Quadro 2. Entrevistados. Fonte: Da autora
(2014)
Quadro 3. Perguntas Fonte: Da autora (2014
Sumrio
Introduo............................................................................................................................. 13
1| Metodologia e aplicativos mveis................................................................................... 17
1.1 Mtodo, sistematizao e metodologia........................................................................ 18
1.2 A metodologia de James Jesse Garrett....................................................................... 21
1.3 Metodologia materialista dialtica................................................................................ 26
1.4 Compreendendo a mobilidade..................................................................................... 26
1.5 Apps e WebApps........................................................................................................... 27
1.6 Mobile First.................................................................................................................... 30
2| Caractersticas projetuais de aplicativos mveis........................................................... 35

2.1 Desafios do Design Mobile........................................................................................... 36
2.2 Ergonomia e usabilidade.............................................................................................. 39
2.3 Padres de estrutura .................................................................................................... 40
2.4 Arquitetura de informao e navegao...................................................................... 45
2.5 Densidade...................................................................................................................... 46
2.6 Gestos............................................................................................................................ 47
2.7 Transies...................................................................................................................... 47
3| Designmob: adaptao de uma metodologia para o design de aplicativos................. 49

3.1 DesignMob.................................................................................................................... 50
3.2 As entrevistas................................................................................................................ 50
3.3 As respostas em discusso.......................................................................................... 52
3.4 Consideraes.............................................................................................................. 56
3.5 Proposta da DesignMob............................................................................................... 56
3.5.1 Pr projeto..................................................................................................... 57
3.5.2 Estratgia....................................................................................................... 58
3.5.3 Escopo........................................................................................................... 59
3.5.4 Estrutura......................................................................................................... 60
3.5.5 Superfcie....................................................................................................... 61
3.5.6 Desenvolvimento........................................................................................... 61
3.5.7 Publicao..................................................................................................... 62
3.5.8 Consideraes sobre a DesignMob............................................................. 62
4| Interface do infogrfico DesignMob............................................................................... 63

4.1 Identificao da proposta............................................................................................. 64
4.2 Metodologia................................................................................................................... 64
4.2.1 Escopo, Estrutura e Esqueleto..................................................................... 64
4.2.3 Superfcie....................................................................................................... 66
Consideraes finais............................................................................................................ 72
Recomendaes para trabalhos futuros............................................................................ 74
Referncias bibliogrficas ................................................................................................... 76
| Introduo
16
17
Introduo
Na atualidade, a tecnologia est cada vez
mais prxima do homem, inserindo-se no
seu dia-a-dia de maneira integrada. Ao acordar, j interagimos com a tecnologia atravs
do despertador no celular, ou mesmo apenas para verificar o horrio; ao longo do dia,
interagimos com o computador, a televiso,
aparelhos de som e geladeiras que possuem
interfaces at algumas mquinas agrcolas
com interfaces digitais.
A tecnologia e a internet esto cada vez mais
prxima de todos, incluindo diferentes classes sociais, faixas etrias e diferentes pases. Veja os dados de transaes bancrias
no Brasil, feitos atravs da internet em 2013,
segundo o site Wi2be (2014)1:
No ano passado, foram 17,146 bilhes
de transaes realizadas, com crescimento de 23,1% ante 2012. Com isso,
a internet representou 39,5% do total
das operaes.
Este apenas um exemplo de uma rea onde

a tecnologia e a internet mudaram a rotina, a
maneira de as pessoas fazerem as coisas;
39,5% um ndice consideravelmente alto.
A partir disso, os profissionais da tecnologia
devem atentar para projetar interfaces para
tais tecnologias.
1
Disponvel em: <http://
goo.gl/YEO1eU> Acesso
em: 19 de maio de 2014.
A palavra mobile, neste

trabalho, estar diretamente ligada tecnologia dos smartphones e
tablets, e est to inserida
no contexto da pesquisa
a ponto da autora no
achar necessria a sua
utilizao em itlico.
2
Os designers, como profissionais atrelados

tecnologia, principalmente os designers
de interfaces digitais, esto atentos e pesquisam para projetar para estas novas necessidades das pessoas, e inclusive criam
novas necessidades, novas maneiras de se
realizarem essas tarefas tal como o exemplo
de executar tarefas bancrias atravs da internet, sem sequer precisar sair de casa, ou
at mesmo usando o prprio celular.
Os smartphones esto presentes em boa
parte do dia das pessoas, seja para o
trabalho, estudo ou lazer e a autora desta

pesquisa sempre foi curiosa em relao a
essa tecnologia especfica, a rea do mobile2
onde os smartphones vm mudando a vida
das novas geraes.
Alm da curiosidade em relao ao mobile,
a autora sempre se interessou por metodologia, por otimizar seus processos de trabalho,
desde as questes pessoais, at as acadmicas e de trabalho.
Desde o incio da graduao vrios autores
de metodologia de projeto foram apresentados, tais como: Gui Bonsiepe (1978), Bruno
Munari (1981), Jorge Frascara (2006), James
Jesse Garrett (2003), Luke Wroblewski
(2011). Mas nenhum deles foca a projeo
de projetos para smartphones. Percebendo
a realidade do curso, onde vrios trabalhos
de alunos (Mallu, Arthur, Cristiano, Jssica)
propem prticas focadas em dispositivos
mveis, usando a metodologia de Garrett,
surgiu o tema do presente trabalho: metodologia de projeto aplicada a mobile.
Em uma pesquisa exploratria inicial, a autora verificou que existe pouco sobre metodologias aplicadas a mobile. Desta forma, pretende-se adaptar uma metodologia existente
para atender as novas necessidades que o
designer enfrenta ao projetar para mobile.
Como prtica da pesquisa ser criado um
projeto de infogrfico interativo apresentando a metodologia adaptada, a DesignMob.
Diante do exposto, a pesquisa torna-se relevante pelo motivo de contribuir como bibliografia inovadora para a rea acadmica,
como metodologia terico-prtica para estudantes de design e para profissionais atuantes no mercado de trabalho.
Questo de pesquisa
Metodologia
Como adaptar uma metodologia de projeto

de interfaces digitais para aplicao em projetos para dispositivos mveis (smartphones
e tablets)?
A presente pesquisa tem carter qualitativo,

visto que apenas algumas metodologias foram selecionadas para servir como premissa para a adaptao metodolgica. Essa
escolha se deu a partir dos principais autores utilizados pelos professores durante a
graduao.
Objetivo geral
Adaptar a metodologia projetual em design
de James Jesse Garrett para uma metodologia para a criao de interfaces digitais para
dispositivos mveis, a DesignMob.
Objetivos especficos
- Compreender diferentes metodologias, seja
com foco em projetos grficos e/ou digitais.
- Entender a dinmica e as caractersticas da
mobilidade, visto que possuem influncia no
projeto de interfaces.
- Identificar mtodos e tcnicas utilizadas no
projeto de interfaces digitais para dispositivos mveis.
- Verificar junto a profissionais do mercado como ocorre o projeto desse tipo de
interface.
- Adaptar uma metodologia de projetos de interfaces digitais para sua utilizao em projetos aplicados a dispositivos mveis.
- Projetar um infogrfico interativo, com o intuito de apresentar a metodologia proposta.
Para definir e explicar as metodologias de tais

autores, foi feita uma reviso bibliogrfica.
Alm da reviso bibliogrfica sobre os autores de metodologia, tambm foi feita uma reviso bibliogrfica a respeito das caracteristicas atreladas a projetos de interfaces digitais
para entender a dinmica da mobilidade.
A partir da exposio dos principais conceitos tericos pesquisados, feito um questionrio e uma entrevista com profissionais
do mercado de trabalho a respeito da prtica
profissional, visando fazer uma anlise das
entrevistas e dos questionrios em relao
aos conceitos tericos.
O questionrio foi feito a partir da plataforma
do Google Docs com perguntas fechadas,
semiabertas e abertas. A entrevista foi feita
de forma semiestruturada, visto que algumas
questes estavam previamente estabelecidas, porm outras foram sendo criadas de
acordo com o dilogo.
Diante da reviso bibliogrfica terica e das
entrevistas em relao prtica projetual
possivel traar adaptaes metodologia
projetual de James Garrett com o intuito de
focar nos projetos de dispositivos mveis.
Para facilitar a disseminao da adaptao
da metodologia proposta, a DesignMob,
criado um projeto de infogrfico interativo que explica a metodologia de maneira
18
19
didtica e prtica, sem que seja necessria

a leitura de textos auxiliares para o entendimento da DesignMob.
Descrio dos captulos
No Captulo 3, so apresentadas as entrevistas e os questionrios realizados, a fim de

discutir e analisar suas respostas comparando-as com os elementos tericos estudados
para que ento haja uma sntese e, finalmente a adaptao da metodologia criando a
DesignMob.
A pesquisa est dividida em quatro captulos com o objetivo de facilitar o entendimento e a organizao das ideias de maneira
ordenada.
No Captulo 4 apresentado o processo

de criao do projeto do infogrfico interativo realizado para ilustrar a DesignMob de
forma didtica, dinmica e interativa.
Na introduo esto apresentados os objetivos do trabalho bem como a justificativa e a

relevncia da pesquisa, alm da metodologia de pesquisa realizada e a presente descrio de captulos.
No Captulo 1, so apresentados os conceitos de metodologia, de mtodo, bem
como os autores utilizados como base terica do trabalho em relao a metodologia de
projeto em design. So eles: Bruno Munari
(2002) e James Jesse Garrett (2003). O captulo segue explicando conceitos de dialtica, mobilidade e ento so apresentados
alguns conceitos especficos do mobile, tais
como as modalidades de Apps e WebApps e
o modelo de trabalho apresentado por Lucke
Wroblewiski (2012) chamado Mobile First.
No Captulo 2, a pesquisa comea a focar
ainda mais nos aplicativos mveis e suas caractersticas projetuais. Inicia explicando os
desafios enfrentados pelo designer quando
projeta para mobile, segue explicando sobre
ergonomia, usabilidade e sua fundamental
importncia em um projeto mobile, alguns
padres de estrutura existentes criados por
designers ou mesmo fornecidos pelo sistema. Apresenta conceitos e aplicaes de
arquitetura de informao e navegao, seguido de conceitos de densidade, gestos e
transies no mobile.
1| Metodologia e aplicativos mveis
20 | DESIGNMOB: PROPOSTA METODOLGICA PARA CRIAO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MVEIS
1.1 Mtodo, sistematizao e

metodologia
Para iniciar um estudo onde o foco metodologia, importa explicar o que ela e para
que serve. As metodologias esto presentes
no cotidiano das pessoas, mesmo que s
vezes elas nem percebam isso. Metodologia
tem a ver com caminho programado, ordenao, projeto. Luiz Antonio L. Coelho (2008)
conceitua metodologia como um conjunto
de mtodos utilizados em determinado trabalho. Alm disso a teoria que estuda a
maneira de se desenvolver trabalhos.
Um exemplo simples onde usamos metodologia na hora de cozinhar. Mesmo se no
utilizamos um livro de receitas, existe uma
srie de passos a serem seguidos, tais como
separar os ingredientes, prepar-los, cozinh-los e servi-los, e acabamos fazendo tal
processo sempre da mesma maneira. Cada
um desses passos constitui um mtodo, e o
conjunto deles formam uma metodologia.
claro que essa no exatamente a mesma
que uma metodologia acadmica, pois a
segunda precisa ser testada em diferentes
casos e provar ser eficaz, Mas as duas so
igualmente importantes e, inclusive, durante o trabalho, sero relacionadas pesquisas
acadmicas com outras pesquisas visando
obter adaptaes.
Portanto dentro da metodologia existem mtodos, e o que so eles? A palavra mtodo
est relacionada com tcnica, detalhamento,
abordagem, processo. Coelho diz: De fato,
o processo seria um mtodo em movimento,
j a tcnica, seria como que o mtodo cristalizado[...](2008, p.252)
Cada um desses mtodos dentro da metodologia vai criando um caminho a seguir, e
isso acontece de forma sistmica, ou seja, a
1| METODOLOGIA E APLICATIVOS MVEIS | 21
metodologia ajuda a sistematizar o trabalho.

Coelho diz que sistematizao :
- Definio do Problema: Voltamos receita, como exemplo. Eis o problema: fazer

um bolo de chocolate. Nesse caso, a definio do problema ser decidir se ser um
bolo de poro nica, ou se ser feito um
bolo grande em uma forma redonda ou retangular, se ter recheio, cobertura, etc.
Organizar dados segundo determinada ordem; [...] reunir elementos dispersos em um SISTEMA de forma a
integr-los em um conjunto que visa
uma mesma finalidade. Buscar a sistematizao em design significa tormar
o ato de PROJETO em um sistema, ou
seja, integrar usuarios na cadeia produtiva como no chamado design participativo. (COELHO, 2008, p. 275)
Tambm deve-se definir se ser um bolo

de aniversrio, ou um bolo para vender, se
ser um bolo experimental, se tem um pblico especfico que vai comer, entre outras
definies.
Depois da explicitao dos conceitos bsicos de metodologia, importa aplicar esse

conhecimento no design. Para comear esse
estudo existe um terico de metodologia do
design que servir de incio, isso porque as
metodologias no design amadurecem a cada
dia, e vo se tornando mais especficas para
cada rea do design, como, por exemplo,
design de produto, design grfico e o design
digital, que o foco deste estudo.
- Componentes do problema:
[...] Uma vez resolvidos os pequenos
problemas [...], recompe-se de maneira coerente, de acordo com todas
as caracteristicas funcionais de cada
parte e funcionais entre si, de acordo
com as caracteristicas materiais, psicologicas, ergonomicas, estruturais,
economicas e, por ultimo, formais.
(MUNARI, Bruno, 2002, p. 36.)
Bruno Munari (2002) autor do livro Das

coisas nascem as coisas, escrito em 1989.
Em seu livro detalha a sua metodologia em
design baseada em resolver um problema,
ou uma necessidade.
Seguindo o exemplo, decidimos fazer um

bolo com recheio, grande e para crianas.
- Coleta de dados: claro que, antes de
pensar em qualquer possvel soluo, melhor verificar se algum j no pensou nisso
(MUNARI, 2002, p.40).
Munari inicia sua metodologia com dois passos principais: Problema e Soluo. Entre
essas duas etapas ele cria uma srie de passos (mtodos) para se chegar ao resultado
da melhor forma possvel.
Este o momento de pesquisar os modelos

e as receitas de bolos de chocolates j existentes, para poder inovar de verdade, sem
repetir algo que j foi feito antes.
A Figura 1 mostra o esquema ilustrado no livro de Munari, explicando a ordem de cada

parte organizada nesse sistema metodolgico criado por ele. Vamos analisar cada um
desses passos rapidamente:
- Problema: O cliente do designer a indstria(2002, p. 32) diz Munari, e ele explica
que o desinger no deve ir a procura de uma
ideia que resolva o problema rapidamente e
sim deve ir por etapas.
- Anlise dos dados: Todos os dados e

referncias coletadas devem ser analisados,
a fim de encontrar possveis falhas e aprender a encontrar novas solues.
Figura 1. Esquema metodolgico. Fonte: MUNARI,

Bruno, 2002, p.55. Adaptao: da autora.
- Criatividade: Ser precisamente a criatividade que substituir a idia intuitiva, a qual

est relacionada ao modo artstico-romntico
de resolver um problema. (MUNARI, 2002,

p.44).
Eis a hora de exercer a criatividade para criar
um bolo de chocolate, sempre levando em
conta todo o processo feito at aqui.
- Materiais e tecnologia: Esse o momento de pesquisar os materiais e as tecnologias disponveis para a elaborao do
projeto final. Essa etapa de extrema importncia, pois de nada vale um timo projeto
quando impossvel faz-lo.
No caso do bolo de chocolate, a hora de
pesquisar os ingredientes disponveis e tambm a tecnologia. Deve-se verificar o forno
disponvel, batedeiras, fogo e outros meios
necessrios para fazer o bolo.
- Experimentao: o momento onde
o projetista poder experimentar seus materiais e suas tcnicas disponveis. muito
importante para inovar, pois mesmo sabendo que certo processo eficiente, sempre
bom tentar novos caminhos.
Na criao do bolo, a experimentao
fundamental, visto que existe um mundo de
possibilidades de ingredientes e maneiras
de assar o bolo.
- Modelo: A partir das experimentaes
gerada uma amostra, um modelo concludo
que ainda poder resolver subproblemas que
ajudam na soluo global.
- Verificao: Nessa etapa o projeto ser
submetido a um tipo de teste, ser apresentado a usurios, para assim ainda resolver
algum possvel problema.
Neste trabalho a palavra
desktop est diretamente
relacionada com computadores no-portteis.
Nesta fase do bolo de chocolate quando se

oferece para ser saboreado e, assim, ver o resultado e ainda alterar possveis problemas.
- Desenho de construo: Esse o momento de desenhar e explicar todas as informaes necessrias para que se possa confeccionar o projeto. importante que tudo
esteja muito claro nesta etapa, para que,
quem for fazer o projeto posteriormente, o
faa com a qualidade planejada.
No caso do bolo, seria o momento ideal para
escrever a receita completa contando os
passos e as tomadas de decises necessrias para que o bolo saia como planejado.
Vistas todas as etapas, o projeto/problema/
necessidade foi solucionado. Essa metodologia de Munari bastante ampla, pois indica todas essas etapas, mas no obriga o
designer a utilizar todas, e, alm disso, ela
no especifica os mtodos utilizados em
cada etapa, Por exemplo, na etapa de criatividade no proposto um processo criativo
especfico.
importante ressaltar que essa metodologia
foi publicada em 1998, tempo onde o design
digital ainda no estava consolidado como
est hoje, e onde o digital era focado no
desktop3.
Houve uma grande mudana cultural quando o meio digital foi inserido na vida das
pessoas.
O livro reinou como o meio de comunicao de massa preferido por vrios
sculos; os jornais tiveram cerca de
200 anos para inovar; at o cinema
deu as cartas durante 30 anos antes
de ser rapidamente sucedido pelo rdio, depois pela televiso, depois pelo
computador pessoal. A cada inovao,
o hiato que mantinha o passado distncia ficou menor, mais atenuado.
(JHONSON, p15.)
Em meio a esses avanos tecnolgicos o

design amadureceu significativamente, assim como as pessoas tambm tiveram esse
aprendizado no mundo digital, e para isso as

metodologias tambm tiveram que avanar
cada vez mais.
possivel perceber bastante diferena em relao a do Munari, que a divide em 12 etapas.
No prximo tpico, apresentada a metodologia de James Garrett (2003), um autor

do design que foca o design digital. Como
a pesquisa focada no digital, a metodologia de Garrett ser apresentada como um
amadurecimento da metodologia de Munari,
visto sua maior aproximao com as novas
tecnologias digitais e o design de interfaces.
1.2 A metodologia de James

Jesse Garrett
James Garret trabalha diretamente com web
desde 1995 e hoje tem uma empresa de user
experience em San Francisco, nos Estados
Unidos. Durante seu trabalho foi construindo
sua metodologia e em 2003 ela foi publicada.
A seguir, ser apresentada sua metodologia
demonstrando cada passo, e fazendo uma
comparao com a de Munari, a fim de mostrar certa evoluo em relao aplicao
no design digital especificamente.
A metodologia de Garrett centrada no usurio, ou seja, foi feita pensando em como
criar um projeto onde o usurio o protagonista, pois ele que vai usar e interagir com
o sistema, site, aplicativo, ou o que for criado
a partir da metodologia.
Quando entramos em um site, o que vemos

um conjunto de imagens e textos que passam informaes e que geram interaes,
tem botes, videos, animaes, etc. Esse o
plano de superfcie, o que o usurio final v
como resultado de todo um trabalho.
Para sistematizar sua metodologia, Garrett

construiu um diagrama que a divide em cinco principais etapas: Plano de Estratgia,
Plano de Escopo, Plano de Estrutura, Plano
de Esqueleto, Plano de Superfcie.
Para chegar a esse resultado, existe um plano de esqueleto, que posiciona tais imagens
e textos, que tem a funcionalidade dos botes, que otimiza a eficcia do site.
Apenas vendo essa imagem (Figura 2) j
No plano de estrutura, um pouco mais abstrato. o momento em que se pensa como

colocar o contedo dividido em todas as
Figura 2. Diagrama
Metodolgico (Garrett,
2003)
pginas do site, onde se criam as categorias de informao. nesse momento que

se geram, por exemplo, os fluxogramas de
navegao.
No plano do escopo onde se define as funcionalidades que o site dever ter, e quais
sero os contedos especificos necessrios
para o site.
O plano da estratgia ainda mais abstrato, onde se pesquisam as necessidades
do usurio para definir os objetivos do site
e qual estratgia ser adotada para melhor
conquistar tais objetivos.
Figura 3. Diagrama da
Experincia (Garrett,
2003)
A Figura 3 mostra como Garrett divide seus

planos:
Garrett (2003) tem como princpio a construo de baixo para cima do diagrama, fazendo com que cada etapa inicie aps a outra.
claro que em vrios momentos se deve voltar a etapa anterior e revisar problemas que
surjam no caminho, mas em seguida retomar
os passos de forma ordenada.
Para descobrir as necessidades do usurio

importante segmentar o pblico alvo do produto, e at mesmo criar personas e usar grupos focais. Garrett (2003) comenta que at
pesquisas antropolgicas so importantes
para entender a cultura e a sociedade em
que o produto est inserido.
Cada passo dessa metodologia possui papel

fundamental nos projetos em design digital,
e em vrios momentos no somente o designer quem coordena, pois a metodologia
demanda a unio de vrios conhecimentos
de diferentes reas.
Quando o projeto for redesign, recomenda-se fazer testes com usurios no incio do
projeto, para que as melhorias sejam feitas
baseadas em tais testes.
Visto de forma geral como funciona a metodologia, agora seguem as especificaes

mais detalhadas de cada plano (ainda na
Figura 3 ao lado). Garrett (2003) dividiu os
planos ao meio pensando na web como funcionalidade (lado esquerdo) e como informao (lado direito).
Para finalizar essa etapa de forma organizada, comum criar um documento onde todas as informaes obtidas estejam escritas
formalmente. Isso ajuda muito porque, em
vrios momentos posteriores a esta etapa,
preciso reler a estratgia.
- Plano de Escopo: Divide-se em especificaes funcionais e requisitos de contedo.
- Plano de Estratgia: o incio do projeto, na verdade o momento em que ainda

no h projeto definido, e o objetivo desse
plano justamente criar uma estratgia para
projetar. Divide-se em necessidades do usurio e objetivos do site.
O documento da estratgia criado anteriormente vai se transformando em escopo

quando os objetivos vo se tornando mais
palpveis, ou seja, so identificadas as necessidades e transformadas em requerimentos especficos de contedo.
Muitos sites falham e o motivo no falha

na tecnologia utilizada ou mesmo a usabilidade. O problema comea antes mesmo de
se escrever uma linha de cdigo, porque no
foram respondidas as principais questes: O
que queremos passar com o site? E qual a
necessidade do cliente no site?
E assim o escopo vai tomando forma, definindo a quantidade de cada requerimento

especfico, definindo possveis contedos
estticos ou dinmicos, propondo interaes e definindo as tecnologias que sero
utilizadas.
As respostas de tais perguntas iro mostrar

os objetivos do site e as necessidades do
usurio, e a partir delas se cria a Estratgia.
Quanto mais claros e explcitos forem os objetivos e as necessidades, melhor ser resolvido o projeto.
Esta uma etapa de muita pesquisa, e atravs dela que se organiza e concretiza cada
vez mais o projeto de forma clara e objetiva.
importante pensar as possibilidades de
interaes e tecnologias a serem utilizadas nesse momento em que o projeto ainda hipottico, pois assim existe a chance
de mudar de idia enquanto se discute a
viabilidade das partes do projeto.

Nessa hora importa explorar as opes que
a plataforma, para a qual o projeto ser feito,
tiver. Por exemplo, se for um tablet, pode-se
explorar o GPS, a cmera, tambm deve-se
pensar que ele pode ser usado em locais externos com muito sol diminuindo a visibilidade da tela.
Para um bom resultado, essencial que o
designer tenha conhecimento bsico sobre
tecnologia e tambm que os profissionais
da tecnologia estejam presentes nesses momentos de decises, antes de iniciar a construo propriamente dita do projeto.
- Plano de Estrutura: Divide-se em design
de interao e arquitetura de informao.
Definidas as prioridades na etapa anterior,
chegada a hora de esqumatizar o que ser
includo e de que forma ser includo cada
contedo no produto final. Essas decises
so tomadas pelo designer de interao e
pelo arquiteto de informao. Do ponto de
vista da interface, o designer de interao
vai determinar a experincia do usurio, e
do ponto de vista do contedo o arquiteto da
informao ir organiz-lo, dividi-lo e categoriz-lo de acordo com o que for relevante.
Para iniciar a organizao do contedo, a
metodologia prope que se faa um fluxograma para orientar a hierarquia e ordem do
contedo. Esse fluxo pode se dar de diferentes formas, Garrett (2003, p. 93) prope
algumas categorias: hierrquica, matricial,
orgnica e sequencial.
Essa categorizao de contedo no simples de construir, necessrio muito trabalho para dividir o contedo em pginas diferentes com hierarquias diferentes. Garrett
(2003) prope um sistema de setas que
ajuda na sistematizao da navegao do

site atravs do sitemap, e ele disponibiliza
em portugus no link: http://www.jjg.net/ia/
visvocab/files/metafilter_ia.pdf
Finalizado o sitemap, possvel perceber visualmente a estrutura do sistema a ser construdo, e s, a partir de ento, o design visual
comea a aparecer.
Veja um exemplo de sitemap construdo por
Garret (2003):
Uma interface de sucesso aquela em que o

usurio percebe de forma imediata as coisas
mais importantes (GARRET, 2003, p.114).
Garrett (2003) ressalta a importncia dos padres de design. No quer dizer que se deve
us-los sempre, mas em muitos casos eles
podem ajudar a tornar uma ao do usurio
mais clara, sem que ele precise aprender a
lidar com cada sistema com que se depara.
Os checkboxes, radio buttons, text field so
exemplos de padres geralmente seguidos
pelos designers.
O design de navegao deve levar em considerao trs objetivos simultaneamente:
- Quando o usurio estiver em uma pgina
especfica, deve poder ir para outros pontos
do site atravs de uma navegao consistente proporcionada pelo site;
- Os elementos de navegao devem relacionar-se entre si, devem demonstrar a ordem
de hierarquia, quando existir e se posicionar de forma categorizada quando houver
categorias.
Figura 4. Fluxograma
(Garrett 2003) Fonte:
http://goo.gl/gSVzr6
Adaptao: a autora.
- Plano de Esqueleto: Garrett (2003,

p.108) fala que esta etapa torna o intangvel
em uma estrutura concreta atravs do design da informao, dividindo-se em design
de interface e design de navegao.
Como anteriormente j foi definido como o
produto ir funcionar, agora ser definida a
forma que essa funcionalidade ter.
O projeto vai tomando forma a cada etapa,
e neste plano onde inicia o refinamento,os
detalhes do projeto. agora que os contedos divididos pelo sitemap, precisam ganhar
forma, precisam interagir atravs de botes,
imagens, campos de texto, entre outras tantas possibilidades.
- Os elementos da navegao devem relacionar-se com o contedo presente nas pginas

que o usurio estiver visitando.
Dentre os vrios sistemas de navegao o
mais usual o global, embora existam outros tais como: navegao local, suplementar, contextual e a redundante.
O design da informao contempla a organizao do contedo dentro de cada pgina, e isso influencia muito a experincia do
usurio. Garrett (2003, p.124) exemplifica
isso quando fala da ordem das informaes:
Estado, profisso, telefone, endereo, nome,
etc. Esta ordem parece estranha, pois estamos acostumados com uma organizao
diferente, por exemplo: nome, profisso, telefone, endereo.

Esse um exemplo simples onde a organizao da informao realmente importa, e em
um projeto de um site inteiro, ou aplicativo,
isso se torna complexo de fazer e influencia
diretamente a experincia do usurio.
Para organizar essas informaes de forma
clara, existe um termo chamado wayfinding,
que ajuda na localizao global das informaes dentro do site, ajuda a entender onde
o usurio est e para onde ele pode ir, isso
est diretamente ligado com o design de
navegao.
Para deixar o projeto ainda mais concreto
existe a etapa dos wireframes, que so a
construo de um layout visual que utiliza todas as etapas anteriores como base da sua
construo (sitemap, design de navegao,
estratgia).
Geralmente feito de forma simplificada nas
cores cinza e branco, com uma tipografia
bsica, pois nesse momento o design visual ainda no importante, o que importa
organizar as informaes hierarquicamente
definidas anteriormente de forma visualmente perceptvel pelo usurio.
- Plano de Superfcie: Depois de toda a
pesquisa, definio de estratgia, escopo e
esqueleto, finalmente chega-se ao design visual. Garrett (2003, p. 134) fala que estamos
lidando com o design sensorial, e que esta
etapa como se fosse a maquiagem do esqueleto do produto.
Quando o usurio interage com a interface, ele recebe as informaes atravs dos
seu sentidos, por isso design sensorial, e
Garrett (2003, p. 135) diz que devemos explorar esses sentidos nos projetos. Dentre
os sentidos, ressaltaremos o ttil, o visual

e o auditivo, que so os mais aplicveis ao
design digital.
Existe uma ferramenta chamada eyetracking
que verifica onde o olho do usurio olha primeiro, e o trajeto que o olho faz. Essa ferramenta serve para ver se o usurio est
olhando para o que realmente importante
no site. Garrett (2003, p. 134) define dois
pontos para um site bem sucedido:
- Fluxo suave, que tem a ver com a organizao, equilbrio e leveza das informaes.
- Viagem guiada, que est relacionada s
possibilidades de tarefas a realizar.
Para desenhar
design devem
o, e Garrett
les: Contraste,
Tipografia.
as telas vrios quesitos de

ser levados em considera(2003) ressalta alguns deGrid, Consistncia, Cor e
A partir dos planos/passos explicados anteriormente, possivel a criao de um bom

projeto de design. Tanto Munari quanto
Garret expressam passos que guiam o designer na criao do projeto, mas podemos
perceber que a metodologia de Munari
um pouco mais generalista, isto , abrange
a criao de design grfico, de produto e
digital; j a metodologia do Garrett enfatiza
diretamente o design digital. Outra diferena que a metodologia de Munari apresenta
os passos sem indicar mtodos especficos,
j Garret pressupe uma srie de mtodos
focados na produo de interfaces digitais.
Diante do exposto, usaremos como base
neste trabalho a metodologia de James
Garret, mas mesmo esta sendo focada no
design digital, em certos momentos ainda
possvel adicionar passos e mtodos para
otimizar projetos em design digital focados
em mobile, que o foco da pesquisa. Para

entender um pouco mais sobre metodologia,
principalmente uma baseada no processo
colaborativo, iremos abordar brevemente a
dialtica.
1.3 Metodologia materialista

dialtica.
Do incio da web at hoje, grandes mudanas
aconteceram, tanto que desde 2005 O`Reilly
j fala da Web 2.0. Os papis de designer e
usurio eram mais definidos e distintos no
incio da web, hoje os designers tambm so
usurios, e a questo da gerao de contedo tem sido cada vez mais colaborativa, ou
seja, o usurio no est apenas acessando
informaes, mas ele tambm est gerando
informaes.
Esse dilogo, cada vez mais presente na
web, o que os gregos (Grcia Antiga) chamavam de dialtica. Muitos tericos como
Kant, Marx, Hegel, Aristteles debateram
sobre a dialtica, chegando a inmeras concluses distintas, mas todas partem da idia
do dilogo, do movimento. Hegel pregava
que a contradio o que d significado
s coisas, ou seja, nenhum sentido ser
verdadeiro isoladamente, mas sim em um
confronto em que um lado seria a tese e o
outro a ainttese, e ainda sendo possvel uma
sntese, que tambm poderia ser contestada
formando-se um circulo interminvel.
Mas Como aplicar essa teoria nesta pesquisa
de design? Devemos encarar o design como
um processo social coletivo, assumindo a
contradio como fora matriz da atividade
projetual, permitindo encarar o processo de
design como ele se apresenta na realidade:
incontrolvel, sujeito a desvios de percurso,
paradoxal, enfim, humano (AMSTEL, 2006,

p. 12).
A experincia de cada usurio nica, por
isso estamos sempre em movimento e, para
projetar para mobile, importante entender
o contexto de mobilidade em que estamos
inseridos. sobre isso que trata o prximo
tpico.
1.4 Compreendendo a mobilidade

Hoje em dia comum as pessoas estarem
conectadas tecnologia durante boa parte
do seu dia, inclusive na rua, nas horas de
lazer e nas horas de trabalho. Mas no foi
sempre assim; na verdade, faz muito pouco
tempo que assim, e isso acarretou mudanas significativas na cultura e na sociedade.
Um exemplo simples que mudou uma ao
cotidiana o aplicativo Easy Taxi, que aparece na Figura 5:
Mudou o tempo em que nas grandes cidades

as pessoas tinham o telefone de apenas um
taxista de confiana, pois com o crescimento da cidade fica complicado e demorado
chamar um taxista que pode estar em qualquer lugar. Para facilitar a vida das pessoas
ao chamarem taxis, e tentar continuar com
a idia de confiana, o aplicativo Easy Taxi
mostra os taxis mais prximos e voc pode
cham-lo atravs do aplicativo, e alm disso pode ver o perfil do taxista, inclusive com
uma espcie de ranking que mostra o que
os usurios falaram anteriormente do taxista.
Assim, do primeiro computador lanado at
os microchips utilizados hoje em dia existiu
um grande avano tencolgico, e hoje as
pessoas interagem com as interfaces sem
perceber a complexidade que est por trs.
Um outro exemplo o caixa eletrnico, que
de maneira muito fcil e prtica o usurio
saca dinheiro em qualquer horrio do dia
sem precisar ir at um banco. Para o usurio
muito simples, mas a tecnologia e a segurana projetadas para esse dispositivos so
muito complexas.
o momento de falar de um termo muito usado ultimamente: Ubiquidade Computacional,
introduzido por Mark Weiser, na dcada de
80:
Weiser vislumbrava um futuro no qual
tecnologias computacionais fariam
parte do tecido da vida cotidiana,
ressaltando que as tecnologias mais
avanadas seriam aquelas que desaparecessem no pano de fundo do nosso entorno.
(PINHEIRO; SPITZ, 2007)
Figura 5. Aplicativo
Easy Taxi. Fonte:
Google Play
O papel do designer se amplia, pois ele

no pode se prender apenas aos tradicionais projetos de cartazes, ou de sites para
computador. Temos que estudar as prticas
sociais e projetar a partir delas, isso no
significa que os tradicionais projetos iro

sumir, mas que muito mais coisas vo surgir
e temos que estar sempre aprendendo para
projetar para elas.
A internet est em quase todos os lugares,
principalmente nas grandes metrpoles, e
o uso de smartphones, tablets e notebooks
cada vez aumenta. Estamos vivendo a mobilidade, onde acessamos arquivos na nuvem a partir de qualquer dispositivo onde
quisermos. Andr Lemos (2006) fala de
questes de territorializao, desterritorializao e reterritorializao, e enfatiza a perda
das fronteiras. No por acaso que ele diz
isso, afinal a tecnologia aliada mobilidade,
permite a aproximao entre cidades, pases
e continentes, entre culturas e religies. No
mundo digital, as distncias significam cada
vez menos. (NEGROPONTE, 1995, p. 170).
Ento estamos vivendo a mobilidade, e o
que fazemos com essa informao? hora
de estudar os dispositivos mveis e os aplicativos mveis para saber como projetar
para eles.
1.5 Apps e WebApps

Como falado no tpico anterior, cada vez
mais os smartphones esto inseridos no cotidiano das pessoas, gerando uma demanda
de trabalho para o designer projetar para
essas plataformas. No s smartphones,
mas tambm os tablets esto inseridos nesse contexto, e antes de falar dos aplicativos
destas plataformas interessante falar um
pouco sobre cada uma delas.
Os smartphones so os telefones celulares
inteligentes, ou seja, diferentemente dos
celulares antigos (primeiros celulares) que
apenas permitiam ligar e mandar SMS, estes
posssuem um sistema operacional que permite a instalao de aplicativos e acesso

internet.
necessitam uma codificao diferente para

cada sistema operacional, visto que ele utiliza a linguagem nativa dos sistemas.
Os tablets so um tipo de computador porttil, mas so pequenos, com espessura fina,

possuem tela touchscreen e no possuem
teclado e mouse, como os computadores.
Permitem o acesso a internet, a instalao de
aplicativos e alguns programas mais complexos que os smartphones.
Os WebApps so aqueles aplicativos acessados atravs do browser do dispositivo,

no necessitam de download e no fazem
instalao no celular. Esses aplicativos no
necessitam uma codificao diferente para
cada sistema, apenas sofrem pequenas variaes de acordo com o browser e a resoluo da tela.
Tanto os smartphones como os tablets funcionam a partir de sistemas operacionais, e

no existe um sistema padro para todos,
nem mesmo tamanhos de tela padro, dificultando o trabalho do designer e requisitando a utilizao de mais de uma tecnologia para que o aplicativo alcance todos os
sistemas.
Os sistemas mais utilizados pelos aparelhos
so:
Os aplicativos hbridos so parcialmente

Apps e parcialmente WebApps. Como os
nativos, eles devem ser baixados atravs
de um aplicativo de store e podem aproveitar todas as funcionalidades do dispositivo.
Como web apps, eles podem ser baseados
em HTML5 e exibidos atravs de um navegador embutido no aplicativo, tendo parte ou
contedo total carregado da web. (AMBROS,
2013)
- IOS, que um sistema exclusivo dos aparelhos produzidos pela empresa Apple. So
eles os Iphones e Ipads.
Acompanhe ao lado (no Quadro 1) um comparativo mostrando o que cada um pode

oferecer:
- Android, utilizado principalmente pelos

aparelhos da empresa Samsung, mas tambm utilizado por outras empresas. Existem
os mais variados modelos desse sistema.
No Quadro 1, vemos as diferenas projetuais, j na Figura 4 (tambm ao lado) podemos ver uma diferena aplicada. O aplicativo
do Facebook tem a verso de Native App e
Web App, e o usurio pode escolher como
deseja usar. Isso exige um oramento alto,
por isso geralmente apenas grandes marcas
possuem os dois tipos.
- Windows Phone, utilizado apenas pelos

aparelhos da empresa Nokia.
Diante desses diferentes sistemas utilizados
pelos usurios, na hora de projetar os aplicativos preciso entender que existem trs
tipos de aplicativos: Native Apps e WebApps
e Aplicativos Hbridos..
Os Native Apps so aqueles aplicativos que
o usurio acessa a partir da loja virtual do
seu dispositivo (smartphone ou tablet), baixa
(faz o download) e instala. Esses aplicativos
Fazendo uma pequena anlise diante do

exemplo prtico do Facebook, possvel
perceber que os Natives Apps, por serem
diferentes para cada sistema, conseguem
ser mais coerentes com a navegao global
do dispositivo, ou seja, eles mantm alguns
padres de menus e de interao, deixando
a interface mais consistente em relao ao
Native Apps
Web Apps
Hybrid Apps
Acesso a internet
Apenas para fazer o download,

depois no mais necessrio.
Em geral necessita.
Pode necessitar ou no.
Compatibilidade
com o dispositivo
Criado para um sistema operacional

especfico.
Criado para ser utilizado em qualquer sistema operacional, pois

acessado atravs do browser.
Criado para ser utilizado em qualquer

sistema operacional, com apenas
partes especficas que necessitam ser
alteradas.
Contedo
pesquisvel
Apenas dentro do aplicativo, sem

pesquisa atravs da web.
Busca padro da web.
Busca da web em geral.
Desenvolvimento
necessrio o desenvolvimento de
um aplicativo para cada sistema
operacional.
necessrio criar apenas um desenvolvimento que ir funcionar

em todos atravs dos browsers.
Utiliza-se o mesmo HTML para diferentes sistemas operacionais.
Possibilidade de
venda
Permitida.
Pode ter publicidade, mas no

pode ser vendido.
Permitida.
Distribuio
A distribuio do aplicativo se d
por meio de aprovao das stores
(lojas), o que pode demandar tempo.
No h restrio.
Distribuio por meio de aprovao

nas stores ou por vezes acessado
pelo browser no tendo restrio.
Recursos do
sistema
Quando o usurio permitir pode

usar os recursos disponveis no
dispositivo, tais como: cmera, GPS,
acelermetro, etc.
Possui acesso limitado aos recursos do dispositivo.
Quando o usurio permitir pode usar

os recursos disponveis no dispositivo,
tais como: cmera, GPS, acelermetro, etc.
Atualizaes
O usurio atualiza.
O servidor atualiza sem interveno do usurio.
O usurio atualiza.
Divulgao do
aplicativo
disponibilizado nas lojas dos

dispositivos.
No esto disponveis nas lojas

dos dispositivos.
disponibilizado nas lojas dos

dispositivos.
Quadro 1. Native App X
Web App
Native App Android
Web App
Native App Ios
Figura 6. Aplicativo do
facebook como Native
App e Web App. Fontes:
m.facebook.com; App
Store, Google Play.
Adaptao: da autora.
dispositivo.
Mas ao mesmo tempo, a existncia de um
WebApp tambm muito prtica, j que no
precisa instalar. Quando o usurio no est
conectado a uma rede wifi, por exemplo, e s
tem a conexo 3G, o WebApp mais vivel,
visto que no necessita baixar e instalar.
A partir dessas comparaes percebe-se
que existem grandes diferenas entre os tipos de aplicativos, e ento fica a pergunta:
quando usar um ou outro? Ou at mesmo
quando usar os dois?
JT Mudge (2012) prope algumas questes
que podem ser colocadas antes de se iniciar
o projeto que podem auxiliar na escolha:
- O aplicativo ir usar algum recurso do dispositivo (tais como cmera, acelermetro)?
- Qual o oramento disponvel para o projeto?
- O aplicativo precisar estar conectado
internet?
- Preciso atingir todos os dispositivos
mveis?
- Quais as linguagens de programao de
que tenho conhecimento?
- O quo importante a velocidade e o
desempenho?
- Como este aplicativo ser monetizado de
maneira eficaz?
Essas questes propostas por Mudge (2012)
podem auxiliar, mas no so decisivas.
Sempre importante avaliar junto com uma
equipe competente. E vale lembrar tambm
que os produtos do design digital, diferente
do grfico, so produtos vivos, em constante
atualizao, por isso, em certas situaes,
pode-se iniciar com uma escolha e depois

ampli-la, atualiz-la e modific-la conforme
as necessidades que surgirem.
Falando em iniciar com uma escolha, ultimamente a questo de iniciar com projetos
desktop ou mobile tem sido debatida. At
pouco tempo os produtos eram lanados
para desktop e ento adaptados para mobile, mas hoje existem outras possibilidades, e
o Mobile First uma delas.
1.6 Mobile First

Em uma traduo livre o conceito significa:
primeiro o mobile. Mas como surgiu isso?
Esse conceito surgiu dos nmeros, das estatsticas, pois a quantidade de dispositivos
mveis vem aumentando cada vez mais.
Dentre as vrias pesquisas vale citar a ltima
do Facebook, a pesquisa parcial de 2014:
Usurios ativos dirios do Facebook aumentaram 21% at maro em desktops. Usurios
ativos dirios do Facebook aumentaram 43%
at maro em dispositivos mveis. (MENLO
PARK, 2014)
O conceito de Mobile First bastante novo,
e significa planejar projetos, desde os mais
simples at os mais complexos (veja na
Figura 7 a seguir), primeiramente para dispositivos mveis, e somente depois para
desktop. Luke Wrowblesky (2011) explica
que foi em 2006 que comeou a demanda
de projetos para mobile, e com o lanamento
do Iphone em 2007 aumentou e a partir da o
mercado s cresceu.
Este um modelo de trabalho com um vis
bem diferente do tradicional, que projetar
para desktop. Vrios fatores influenciam na
hora de projetar pensando primeiro em mobile: o tamanho da tela, a diferena da imerso, da interao, entre outros.
Figura 8. Tamanho de tela desktop x smartphone.

Fonte: Da autora (2014).
Figura 7. Mobile First. Fonte: http://www.

designinterativo.etc.br/wp-content/uploads/2013/02/
Mobile-Firt.jpg
Quando projetamos para desktop, mesmo com as grandes diferenas de tamanho de tela, existe uma certa aproximao
de padro de tamanho que 1024x768px.
Pensando em mobile, a medida aproximada
usada como padro 320x480px. A diferena de tamanho influencia muito na hora
de projetar. Se comearmos pelo desktop e
apenas o adapt-lo para o dispositivo mvel,
nem sempre a experincia do usurio ser
satisfatria. Veja na Figura 8 a diferena entre os tamanhos de tela.
por causa dessa diferena de tela e pelo
aumento exorbitante do uso de tais dispositivos mveis que Wrowblesky (2011) prope o
Mobile First, e explica que melhor partir do
mobile para o desktop do que ao contrrio.
Vale ressaltar que alm do Mobile First existe
o conceito de Design Responsivo que tambm surge da necessidade de projetar para
diferentes tamanhos de tela.
Design responsivo consiste em projetar um

site que se adapte a diferentes formatos de
tela (incluindo adaptaes de grid, quantidade de contedo, tamanho de imagens, entre
outros). Surgiu da demanda das grandes
telas de computadores, que se diferenciam
dos notebook, estes dos tablets e estes dos
smartphones. Diferente do mobile first ele
no precisa iniciar projetando para mobile,
mas sim projetando um site para desktop
que se adapte quando acessado do mobile.
Antes de apresentar alguns exemplos de mobile first, h outro detalhe que Wrowblesky
(2011) explica: no importa se o projeto iniciou como Native App, ou se o projeto ser
acessado pelo navegador; basta ser projetado primeiro para mobile que estar inserido
no contexto do mobile first.
Um timo exemplo de Mobile First o aplicativo Instagram, ilustrado na Figura 9, a
seguir.
foi feito primeiro para dispositivos mveis,

ou seja, dentro dos conceitos do mobile first.
Veja na Figura 10 o site mobile e o site
desktop:
Instagram. Fonte:
Google Play.
Adaptao: da autora.
O site foi criado baseado nas necessidades

que o usurio mobile tem, e focado nessas
necessidades para no colocar informaes
demais. No site desktop, h espao para colocar informaes adicionais, de segundo
plano, mas no mobile no h. Nesse tipo de
projeto, a pesquisa sobre as necessidades
reais do usurio deve estar muito presente,
pois ela far total diferena no resultado do
projeto, visto que no mobile no estaro todas as informaes e opes como h no
desktop.
Portanto Wrowblesky (2011) traz esse conceito de Mobile First que nasceu a partir de
necessidades reais, de dados, do crescimento dos usurios na internet a partir de
dispositivos mveis, e cada vez mais parece
necessria uma metodologia aplicada a esses novos projetos, por isso a importncia
dessa pesquisa. No incio do captulo mostramos a importncia da metodologia na otimizao de processos dentro dos projetos
de design, e como eles devem ir amadurecendo de acordo com as necessidades e
tecnologias existentes.
O aplicativo uma rede social de fotos, onde

o usurio tira fotos, geralmente bem espontneas sobre qualquer atividade do seu dia,
aplica um filtro, cria as hashtags, coloca sua
localizao e compartilha com seus amigos.
No prximo captulo, vamos enfatizar as caractersticas projetuais dos dispositivos mveis, com o objetivo de entender cada vez
mais essa realidade e aprender a projetar
para ela.
Durante muito tempo, o projeto esteve disponivel apenas para mobile, mas hoje em dia
o usurio pode acessar atravs do computador para ver as fotos dos seus amigos, mas
para postar preciso ser a partir do mobile
apenas.
O aplicativo do tipo Web Native disponvel
para Android, IOS e Windows Phone.
Outro exemplo de Mobile First a empresa
Norte Americana South West, citada no livro
do Wrowblesky (2011) como projeto mobile
first de sucesso. A empresa tinha um site antigo e ento quando reprojetaram o site ele
Figura 10. Site da South Weast. Fonte: www.

southwest.com Adaptao: da autora.
2| Caractersticas projetuais de aplicativos mveis
2 CARACTERSTICAS PROJETUAIS DE APLICATIVOS MVEIS | 39
2.1 Desafios do Design Mobile

Neste tpico iremos discutir os desafios do
mobile a partir de Jennifer Tidwell (2011), autora do livro Designing Interfaces que explica alguns desafios de projetar para mobile
e Stephanie Rieger (2012) e Denis Kardys
(2012), co-autores do livro The Mobile
Book, que explanam sobre algumas possibilidades do futuro do mobile.
Para falar de mobile, falaremos um pouco de
futuro. As tecnologias no param de avanar, os designers tm feito projetos cada vez
mais inovadores e a mobilidade est cada
vez mais inserida na vida das pessoas, assim podemos inferir que o mobile continuar
no futuro. Essa afirmao no est ligada a
questes do destino, mas sim de jornada, a
qual estamos traando a cada vez que usamos, projetamos e estudamos smartphones,
tablets, entre outros dispositivos mveis.
Rieger (2012) acredita que num futuro prximo estaremos todos conectados. Mas como
assim, no estamos j conectados? Rieger
vai alm das conexes humano-computador,
vai alm do pensar da internet nas grandes
cidades. Ela explica que cada vez o mundo
est mais conectado, no s nas grandes cidades mas em quase tudo. Inclusive em reas como agronomia e pecuria, a tecnologia
e a mobilidade j esto presentes e estaro
cada vez mais. Alm disso, explica que, alm
de ns estarmos conectados aos dispositivos, estes dispositivos esto conectados
com outros disposivos. Por exemplo, se um
usurio quiser escutar uma msica em seu
computador, ele pode acessar a internet e
comprar a msica em uma loja virtual. Ento
far o download e poder escut-la.
Esta uma ao muito comum no cotidiano das pessoas e , parece simples, mas veja
esta grande conexo: usurio - computador
- rede wifi - site da loja - conexo com o carto de crdito - servidor da loja virtual disponibiliza a msica - download.
Pensando que cada vez mais os usurios
realizam tarefas pelos dispositivos mveis, o
designer deve saber projetar para que essa
tarefa seja simples de completar, levando em
conta os desafios que o mobile proporciona
ao designer e tambm ao usurio.
Tidwell (2011, p. 442) descreve alguns desafios que o designer encontra ao projetar para
mobile que anteriormente no encontrava
nos projetos desktop:
- Telas pequenas: Visto que o tamanho
de tela do mobile substancialmente menor que a de um desktop, o designer deve
reduzir o design a sua essncia, tirar as informaes extras que puder, deix-lo objetivo,
apenas com as funes mais importantes da
pgina.
tamanhos de botes e quantidade de rolagem da pgina.

- Dificuldade de digitar textos: Ningum
gosta de escrever tocando na tela, ento
importante diminuir ao mximo o imput de
texto do usurio na experincia mobile. Em
casos de formulrios, bom reduzi-los ao
mximo e tambm ter a opo de autocompletar, pois isso otimiza a ao do usurio.
- Desafios em relao ao ambiente:
As pessoas utilizam o mobile em diferentes lugares: em casa, na cama, na rua, no
nibus, caminhando, no banheiro, etc. Isso
influencia muito no projeto, pois o designer
deve pensar na incidncia do sol, na falta de
iluminao, na falta de preciso do toque, na
dificuldade de parar para ler grandes textos.
- Ateno limitada: Pelo motivo de o
mobile ser usado em diferentes lugares, o
usurio acaba dividindo a ateno do mobile com outras atividades, alm de s vezes
estar conversando com outras pessoas, enquanto usa um aplicativo ou acessa um site.
Riegel (2012, p. 72) tambm descreve sobre
alguns desafios:
- Novos dispositivos: Diante das novas
tecnologias (veja a Figura 11) cada vez mais
surgem diferentes dispositivos mveis alm
dos smartphones e dos tablets. Um exempo o projeto do Google Glass que usa
a tecnologia Heads-Up-Displays (HUD) que
singifica a tecnologia atravs de telas transparentes. Mas por que o designer deve ficar
atendo a estes novos dispositivos? Isso
muito importante porque cada dispositivo
possui interaes especficas diferentes,
e os projetos devem, alm de estarem de
acordo com tais interaes, usufruir ao mximo delas para proporcionar inovao e
- Variaes de tela: Alm das telas serem pequenas, existe uma grande variedade
de dispositivos mveis, e muitos deles com
diferentes tamanhos de tela. Isso dificulta o
trabalho do designer, visto que difcil um
layout funcionar bem em telas que variam de
128px at 600px de largura. Algumas solues possveis so fazer telas adaptveis e
at mesmo projetadas de maneira diferente
para alguns tamanhos, e tambm o estudo
do pblico alvo do projeto pode ajudar a diminuir esta variao.
- Touch screens: A maioria dos dispositivos mveis oferecem a interao a partir do
toque na tela. Essa interao oferece novas
e diferentes possibilidades que o desktop.
Embora tenha timos recursos, alguns
cuidados devem ser tomados, tais como:
Figura 11. Projeto

Google Glass. Fonte:
http://goo.gl/qIM0X5
experincia satisfatria ao usurio. A questo das diferentes interaes tambm deve

ser observada pelo motivo de que o mesmo
aplicativo pode no funcionar em diferentes
dispositivos, ento devem ser feitas adaptaes pensadas estrategicamente.
- Inseguranas: A autora (RIEGEL, 2012)
traz a preocupao com a privacidade e
segurana dos usurios. At que ponto um
usurio pode andar pelas ruas fotografando livremente e compartilhando imagens
sem a permisso das outras pessoas? E se
j proibida a utilizao dos smartphones
durante a ao de dirigir, no seriam ainda
mais perigosas as tecnologias transparentes
(HUD)? Essas questes no tm respostas
concretas, segundo a autora, mas importante o designer amadurecer e debater sobre
isso antes de iniciar cada projeto.
- RFID: Vem do termo Radio Frequency
Identification que significa identificao por
rdio frequncia. uma tecnologia que proporciona interao entre os dispositivos mveis e outros objetos que tenham a etiqueta
RFID.
- NFC: Vem do termo Near Field
Communication que significa comunicao
por proximidade. Essa tecnologia, presente
em alguns smartphones, utilizada de vrias
formas, tais como efetuar compras, interagir
com dispositovos de carros, pagamentos e
interao com cartazes e outros produtos
no digitais. Pode funcionar de trs formas:
ativo/passivo onde ambos os dispositivos
transmitem sinal, um objeto pode transmitir
uma URL, por exemplo; Leitura e gravao
similar ao RFID, pode ser utilizado para descontar crditos em transportes por exemplo;
peer-to-peer onde os dois dispositivos interagem transmitindo dados, um usurio pode
pagar as compras do supermercado aproximando o smartphone ao caixa, ou interagir
com outro smartphone e transferir dados por

exemplo.
O autor Denis Kardys (2012) explica sobre
trs principais tpicos que devem ser levados em considerao no momento em que
colocamos a mo na massa:
- Canvas: Acreditamos que existe um tamanho padro de pgina, diz Kardys (2012, p.
228), mas que na verdade no existe. Essa
idia de pgina vem de um histrico processo de passagem do design grfico para o
digital, onde os prprios designers se apropriaram do termo pgina. Precisamos entender que as telas dos websites e aplicativos
so como databases e no pginas, pois variam de tamanho, interagem e so vistas por
milhares de usurios ao mesmo tempo.
- Capacidade/Capability: Presumimos
que os dispositivos mveis possuem as
mesmas capacidades que os nossos possuem (meu smartphone), diz Kardys (2012).
Ento devemos perceber que diferentes
dispositivos tem diferentes capacidades as
quais devemos explorar, mas ao mesmo
tempo devemos tentar estabelecer um meio
termo para que vrios dispositivos possam
usufruir do mesmo aplicativo, principalmente
em WebApps.
- Contexto/Context: Certas vezes pensamos que sabemos o contexto especfico
onde os usurios podero utilizar tal aplicativo, e definimos que essa a necessidade.
Mas isso no pode ser algo definitivo. Nunca
saberemos todos os contextos onde os
usurios utilizam seus dispositivos mveis,
mas no quer dizer que no sabemos nada,
apenas que no podemos prever tudo. Para
ajudar a resolver tais questes, Kardys 2012,
p. 231) sugere a constante observao dos
usurios.
Esses desafios, cuidados e possibilidades

devem ser explorados pelo designer ao mximo, pois quanto mais os dispositivos oferecerem tecnologia, mais o designer deve se
apropriar dela, e assim um incentiva ao outro
e o usurio vai ter cada vez uma experincia
mais inovadora e completa.
Nos prximos tpicos iremos seguir explorando o mobile, para cada vez conhec-lo
mais. No seguinte tpico abordaremos conceitos de ergonomia e usabilidade nos dispositivos mveis.
para interagir, e tal deciso vai depender do

contexto do usurio.
Utilizar o dispositivo com apenas uma mo
muito comum, pois liberta o usurio para
utilizar a outra mo para realizar outra atividade, mas ao mesmo tempo o designer deve
perceber que nesta situao o usurio utilizar seu polegar para interagir, por isso a
regra do polegar.
Veja na Figura 12 abaixo um exemplo:
2.2 Ergonomia e usabilidade

Como j mencionado anteriormente, o contexto de uso dos dispositivos mveis diferente do contexto dos desktops e, a partir
dessas diferenas, devemos explorar conceitos de ergonomia e usabilidade de forma
especfica para melhorar a experincia do
usurio. Como tambm j mencionado, o designer no projeta apenas pginas para aplicativos mveis. Joseph Clarck (2012, p. 290)
explica que, quando entramos mo mundo
do touch screen, no importa apenas como
os pixels se parecem, mas como o usurio o sente quando toca. A partir disso, ele
complementa que, quando projetamos para
dispositivos mveis, entramos no mundo do
design industrial.
Clarck (2012) atenta para algumas questes
prticas da usabilidade que ele chama de
The rule of Thumb(p.290), que livremente traduzimos como a regra do polegar.
Mas o que significa essa regra? Tal conceito vem de uma percepo prtica do usurio, o autor explica que podemos segurar o
dispositivo mvel com apenas uma mo, e
com esta mesmo utiliz-lo, ou utiliz-lo com
a outra mo, ou ainda utilizar as duas mos
Para que esse usurio tenha uma experincia otimizada e ergonmica, sugere-se que
se coloquem os principais botes de funcionamento do aplicativo na zona onde o polegar alcana. Essa regra do polegar no
necessariamente se aplica a todos os aplicativos, por isso sempre importante a constante pesquisa do contexto onde os usurios
utilizam aplicativos semelhantes e seus dispositivos mveis em geral.
Veja no exemplo a seguir (Figura 13) o aplicativo Path que coloca seus principais botes de navegao em tal zona:
Figura 12. Usando o

Celular com o polegar.
Fonte: http://goo.gl/
gIoX5W
Isso deve ser pensado para que o aplicativo

funcione sem internet ou que de um retorno
ao usurio sobre seu funcionamento nesta
circunstncia. Outro elemento importante
a esttica, pois certamente existem muitos
tradutores disponveis, e a esttica um
elemento atrativo importante. E por ltimo
Cybis ainda fala da questo de um processo off-line, que trata da associao do usurio s marcas, a questo da confiana e
da credibilidade que o usurio pode ou no
depositar no aplicativo em questo. Assim,
percebemos a importncia dos seguintes
conceitos: utilidade, usabilidade, disponibilidade do sistema, esttica e processo off-line.
Para explorar os conceitos de esttica e usabilidade, no seguinte tpico explicaremos
sobre os padres de estrutura existentes
atualmente para os dispositivos mveis.

Path. Fonte: Google
Play. Adaptao: da
autora (2014).
Outro quesito importante que o autor (Clarck,

2012) ressalta a questo dos botes do
prprio sistema do dispositivo, pois, dependendo do sistema, pode ser mais ergonmico que os botes do aplicativo se posicionem acima ou abaixo da tela.
Existem alguns outros conceitos que, segundo Walter Cybis (2010 p.255) podem
ajudar o usurio a ter uma experincia mais
completa. Veja o exemplo: uma pessoa est
em outro pas cujo idioma ela no fala bem.
Encontra-se em um restaurante e deseja pedir um prato especifico e se comunicar com
a garonete. Para resolver a situao, a pessoa instala um aplicativo tradutor de texto. O
aplicativo deve mostrar-se til para resolver
tal tarefa e de uma forma eficaz, ou seja que
possua usabilidade em sua utilizao. Alm
disso, existe a questo da disponibilidade
do sistema, pois o usurio pode estar em
uma regio que no possui sinal de internet,.
que se adaptam. Isso significa que, por exemplo, o site estar igual no desktop e no tablet,
e apenas se modificar no mobile, cuja tela
circunstancialmente menor (Figura 14).
- Column Drop: Esse padro prev a modulao a partir de um layout de trs colunas. Em uma tela maior, aparecer com trs
colunas e, medida que diminuir a resoluo, as colunas iro se reagrupar de acordo
com o tamanho da tela, podendo ser de duas
ou apenas uma coluna (Figura 15).
- Layout Shifter: Esse padro funciona para layouts mais complexos, onde o
designer deve estabelecer que a partir de

exatas mudanas de resoluo o layout ir
se alterar da maneira projetada, fazendo
com que os mdulos se reorganizem de
maneira especfica e no de forma orgnica.
(Figura 16)
- Tiny Tweaks: Esse padro o mais simples, funciona em layouts minimalistas onde
h apenas uma coluna. Desta forma os elementos da coluna nica iro apenas variar
de tamanho de acordo com a resoluo da
tela. (Figura 17)
Figura 14. Nanoc. Fonte:

http://mediaqueri.es/
2.3 Padres de estrutura

Agora que entendemos que as telas projetadas so mais do que apenas pginas, so
um conjunto de pequenas partes, de interaes que variam de acordo com a resoluo
de tela, com as possibilidades do dispositivo
mvel, entre outros, vamos nos apropriar de
conceitos de padres de design que constroem o design a partir de mdulos, entre outros conceitos. Para iniciar, iremos comentar
alguns padres de estrutura do design responsivo propostos por Lucke (Apud FROST,
2012, p. 132) que constroem o design a partir
de mdulos, pois assim podero se adaptar
em diferentes tamanhos de telas, desde os
desktops at os smartphones (acompanhe
as figuras ao final dos tpicos):
- Mostly Fluid: Esse padro define basicamente duas propostas de layouts modulados
Figura 15. Erik Ford.

Fonte: http://mediaqueri.
es/
- Thumbnail-and-Text List: estrutura de

layout para lista de tens, geralmente utilizada para listar tens que possuem imagem,
texto e links. (Figura 22)
Figura 16. Tres Colunas.

es/
- Infinite List: estrutura de layout com

rolagem vertical infinita, ou seja, quando o
usurio abre a tela carrega algumas informaes, e de acordo com a rolagem que o usurio faz, mais informaes so carregadas.
(Figura 23)
entender uma etapa de extrema importncia

em um projeto: a arquitetura de informao.
No prximo tpico abordaremos conceitos
de arquitetura de informao, navegao,
UX, entre outros.
- Generous Borders: estrutura de layout

que usa grandes margens e espaos em
branco ao redor de botes para melhor interao, geralmente usada em telas de grandes menus, em lista de tens, entre outros.
(Figura 24)
Figura 17. List Apart.

es/
- Text Clear Button: boto que apaga o

texto, geralmente utilizado em caixa de texto
de URLs, em barras de busca ou onde tem
muito texto. Isso ajuda muito para que o usurio no precise apagar letra por letra de texto. (Figura 25)
Vistos rapidamente alguns padres de estrutura do design responsivo, veremos os padres propostos por Jennifer Tidwel (2011,
p. 448) especificamente para design mobile
(acompanhe as figuras ao final dos tpicos):
(explicaremos no tpico 2.6 sobre gestos) o

usurio pode acessar outras telas. Esse tipo
de estrutura recomendado para ser utilizado com poucas telas, pois seno pode ficar
cansativo para o usurio. (Figura 19)
- Vertical Stack: Estrutura de layout vertical, geralmente com apenas uma coluna e
com grande rolagem. Nessa estrutura, as informaes mais importantes so colocadas
em cima. Geralmente utilizada em sites e webApps. (Figura 18)
- Touch Tools: Estrutura de layout, geralmente utilizada em aplicativos bastante

imersivos. Essa estrutura permite que o usurio atravs de um toque na tela esconda ou
faa aparecer os menus de controle do aplicativo. Isso serve para que, durante a imerso o usurio no precise ficar vendo tais
botes. Tal estrutura geralmente utilizada
em aplicativos de jogos, de cmera, leitura
de livros, entre outros. (Figuras 20 e 21)
- Filmstrip: Estrutura de layout geralmente sem rolagem vertical, mas com rolagem
horizontal, ou seja, atravs do gesto swipe
- Loading Indicators: Enquanto uma pgina carrega, importante que o usurio perceba a evoluo do carregamento, evitando
que ele desista da ao. um padro utilizar
um elemento grfico mostrando o carregamento dos contedos, principalmente em
jogos, vdeos, fotos, entre outros. (Figura 26)
- Streamlined Branding: Os aplicativos e
os sites para mobile devem manter a identidade proposta pela marca, empresa a qual
pertence, de maneira que o usurio perceba
atraves da cor, tipografia, entre outros elementos estticos a consistncia da identidade. claro que se deve atentar em relao a
quantidade de contedo e ao peso das imagens, etc. (Figura 27)
A partir deste conhecimento possvel
Figura 18. Twitter. Fonte: www.

twitter.com
Figura 19. Melissa WakeUp.

Fonte: Google Play
2.4 Arquitetura de informao e

navegao
Em projetos desktop, usual a construo
de sitemaps, fluxogramas e wireframes, geralmente nesta respectiva ordem. J a construo de prottipos geralmente se d apenas em projetos mais complexos.
Figura 20. Voice sem menu.

Fonte: App Store
Figura 21. Voice com menu.

Fonte: App Store
Figura 22. Lista de tens. Fonte:

www.mobile-patterns.com
Figura 23. Twitter com rolagem

infinita. Fonte: www.twitter.com
J nos projetos mobile, segundo Denis

Kardys (2012), o processo se d de maneira
diferente. Inicia-se com rabiscos em papel,
os wireframes tambm podem ser feitos no
papel para agilizar o processo, visto que as
possibilidades se ampliam, aumentando o
numero de wireframes at se chegar no wireframe final. Como nos projetos mobile as telas desenhadas no so estticas, e sim com
variadas intaraes, o prottipo essencial
como parte da construo do projeto e, junto
ao prottipo construido o fluxograma. Os
prottipos, tanto de wireframes como com a
direo de arte, so importantes ferramentas
para valorizar o trabalho perante o cliente,
pois assim ele entende o processo e tambm a importncia das tomadas de deciso
de cada interao presente nos projetos.
navegao nos projetos desktop: linear, hierrquico e no-linear.

Na linear, o usurio navega em uma sequncia especfica de tela a tela. J na navegao
hierrquica, existem diferentes nveis de telas orientadas ao contedo e existem algumas restries de navegao. Na navegao
no-linear o usurio pode navegar livremente pelas telas sem nenhuma ordem especfica e praticamente sem restries. Veja na
figura abaixo:
Alm dos prottipos os storyboards tambm

so relevantes. A inteno do storyboard
mostrar passo a passo como vo acontecer
as interaes e, principalmente, as transies, tudo representado de forma esttica.
Essa tcnica pode ser usada com wireframes de baixa fidelidade, ou seja, rascunhos
simples.
Figura 24. RunKeeper. Fonte:

www.mobile-patterns.com
Figura 25. Chrome. Fonte:

Google Play
Figura 26. CandyCrush. Fonte:

Google Play
Figura 27. Bradesco. Fonte:

Google Play
Tanto o fluxograma, quanto o prottipo e o

storyboard esto relacionados ao sistema de
navegao do projeto, ou seja, onde so
definidos os caminhos que o usurio pode
percorrer atravs das pginas.
Existem trs tipos bsicos de sistemas de
Figura 28. Sistemas

de navegao. Fonte:
http://goo.gl/Hc3043
Adaptao: da autora.
Para definir o sistema de navegao necessria uma avaliao da complexidade e proposta do projeto, pois cada um funciona de
maneira diferente.
Nos projetos mobile tambm podem ser utilizadas tais estruturas, porm no se recomenda muitos nveis de navegao, ou seja,
contedos profundos. Outra caracterstica
que no mobile, especialmente em Apps,
a navegao no fica sempre explcita ao
usurio, mas sempre necessrio visualizar
ela atravs de um menu, ou no caso de apps
para IOS, com uma navegagao global de
at 5 itens, como o caso do Facebook,
mostrado anteriormente no Captulo 1 na
Figura 6.
(2014) que mostra a resoluo de diferentes dispositivos mveis e a sua densidade

correspondente.
A partir desta Figura possivel perceber a diferena entre vrios dispositivos e como a
proporo da densidade. Com esta gama de
diferentes resolues de dispositivos mveis
sempre necessrio uma escolha consciente baseada em pesquisas de pblico alvo,
etc.
2.6 Gestos
A partir do contexto das interfaces touchscreen a interao do usurio se d atravs
dos gestos realizados pelos dedos dos usurios. Para que os sistemas interpretem de
maneira correta a interao existem padres
de gestos, e outros que podem mudar de
sistema para sistema. Acompanhe na Figura
os principais gestos:
Na Figura a seguir veja um exemplo prtico

de densidade de 200%:
2.7 Transies
O ambiente virtual capaz de proporcionar
experincias que no conheciamos no mundo real, as transies so um exemplo disso.
Uma transio a animao entre um momento inicial e um final em uma interface e
est bastante presente nos dispositivos mveis. Em praticamente qualquer ao que o
usurio provocar no sistema, vai haver uma
transio duranta a reao do sistema. Veja
alguns exemplos de transies na Figura a
seguir:
2.5 Densidade
Quando projetamos para desktop, desenhamos as telas em tamanho real, ou seja, se a
resoluo da tela for 1024x768px, criaremos
neste mesmo tamanho, esta outra grande
diferena na hora de projetar para mobile,
pois no projetamos em tamanho real.
Figura 29. Tabela de

densidade. Fonte:
http://screensiz.
es/phone (2014)
Adaptao: da autora.
O conhecimento e entendimento destes gestos essencial para o designer, visto que

interferem diretamente na qualidade de interao do usurio, podendo proporcionar experiencias eficazes ou no. Alm dos gestos
existem tambm as transies que interferem na interao.
Para garantir maior qualidade de resoluo

nos dispositivos mobile existe o conceito de
densidade (ou retina), que implica em projetar em maior resoluo do que a real do
dispositivo. Acompanhe na Figura a seguir
disponibilizada pelo site screensiz.es/phone
Por estar presente em grande parte dos aplicativos importante que o designer esteja
atento a esse detalhe, e pela grande influencia que as transies tem na interao reforada a importncia dos prottipos navegveis, que testam as interaes durante a
Figura 30. Aplicativo Gogobot. Fonte: www.mobilepatterns.com Adaptao: da autora.
Figura 31. Gestos. Fonte: http://static.lukew.com/

TouchGestureCards.pdf Adaptao: da autora.
Figura 32. Transies.
construo dos projetos.

Concluindo o captulo possivel perceber
que existem muitas especificaes para projetar para mobile. A autora desta pesquisa
acredita que estes conhecimentos vistos podem fazer total diferena na construo de
um projeto mobile, e por esse motivo que a
DesignMob partir da metodologia de Garret
atrelada aos conceitos do presente captulo.
3| Designmob: adaptao de uma

metodologia para o design de aplicativos
3 ADAPTAO DE UMA METODOLOGIA PARA APLICATIVOS MVEIS | 53
3.1 DesignMob
A DesignMob uma metodologia projetual
focada na criao de interfaces para dispositivos mveis, com o objetivo de orientar o
caminho de designers e estudantes de design na hora de projetar. Para construir tal
metodologia, como j falado na introduo,
a autora realiza uma reviso bibliogrfica esplanada nos captulos anteriores e tambm
entrevistas com profissionais do design do
mercado de trabalho.
As entrevistas com os profissionais do design no mercado de trabalho tm a inteno
de absorver o conhecimento prtico e terico aplicado por eles diariamente em seus
projetos de design, especificamente em projetos mobile. Dessa forma, possivel relacionar e validar etapas metodolgicas. Essa
mistura de academia e mercado , na viso
da autora, essencial para a construo de
uma metodologia ainda mais eficiente.
3.2 As entrevistas
Quadro 2.
Entrevistados. Fonte: Da
autora (2014)
A partir dos conceitos tericos estudados

nos captulos anteriores, pertinente estudar o conhecimento prtico dos profissionais do mercado de trabalho. A fim de adquirir os conhecimentos prticos aplicados
diariamente nos projetos, a autora procurou
cinco profissionais de diferentes empresas e
com diferentes funes. Veja no Quadro 2 os
entrevistados:
Profisso
Cidade
Profissional A: Designer
Porto Alegre
Profissional B: Arquiteto de Informao
Porto Alegre
Profissional C: Gerente de Projetos
Porto Alegre/ So Paulo
Profissional D: Atendimento Comercial
Porto Alegre
Profissional E: CEO
Rio de Janeiro
Por motivos de localizao geogrfica e,

por depender da disponibilidade dos profissionais, em alguns casos foi realizada
entrevista presencial, em outros questionrios a partir do Google Docs e trocas de
emails. Independente do modelo (entrevista
ou questionrio) utilizado, as perguntas foram feitas de forma aberta e tambm semi
estruturada, possibilitando novas perguntas
de acordo com a conversa, mas sempre com
a finalidade de entender como as metodologias so utilizada nas empresas, em que
etapas o designer est presente e quais as
diferenas, dificuldades, peculiaridades dos
projetos mobile. A seguir no Quadro 3 expe
Perguntas
01
Qual seu cargo/papel dentro da empresa?
02
A empresa faz projetos partindo dos conceitos de Mobile First?
03
Como funciona o processo da criao de

um aplicativo mobile na sua empresa?
04
A empresa opina em relao a necessidade do projeto?
05
Voc acha importante existir uma metodologia focada em projetos mobile?
06
Quais os principais cuidados que voc tem

na hora de projetar para mobile?
07
Como a empresa diferencia projetos de

App e WebApp?
08
Sua empresa possui documentao em

forma de relatorio, infogrfico, ppt, etc?
09
Existe dilogo entre o Arquiteto de

Informao e o Designer?
10
Na sua empresa se utiliza o mesmo

mtodo para criao de projetos mobile e
desktop?
11
Quais as principais diferenas entre projetos Desktop e Mobile?
Quadro 3. Perguntas Fonte: Da autora (2014)
todas as perguntas, lembrando que nem todas elas foram aplicadas a todos os profissionais, levando em considerao suas respectivas reas de atuao.
A pergunta 01 foi pertinente para entender
o ponto de vista do profissional perante as
perguntas seguintes, visto que poderia haver
conflitos entre as respostas pelo motivo de
ser de diferentes reas de atuao. As perguntas 02 e 07 tinham a inteno de aferir os
conhecimentos tcnicos e tambm tericos
dos profissionais, visando perceber se eles
conheciam tais conceitos e se os aplicavam,
pois poderiam conhecer e no aplicar ou
vice versa.
Nas perguntas 03, 05, 06, 08, 09 e 11 a inteno foi de perceber e entender a relao do
profissional e da empresa com as metodologias, verificando se as utilizavam, documentavam e se as achavam relevante.
A questo 04 procurou entender o posicionamento da empresa diante dos projetos e
a questo 10 foi pertinente para entender a
atual realidade do mercado em relao s
metodologias mobile ou desktop.
Para responder a pergunta 03, os profissonais C, D e E desenharam o processo da empresa para que ficasse melhor explicado, e
ento a partir dos rascunhos a autora adaptou para os Quadros (4, 5 e 6) a seguir:
Figura 33. Processo da
empresa do profissional
E. Fonte: Da autora
(2014)
Figura 34. Processo da

empresa do profissional
D. Fonte: Da autora
(2014)
do profissonal D, por exemplo, no h tanto dilogo, principalmente entre o arquiteto

de informao e o designer, e este apontou
como um problema que deve ser melhorado.
Figura 35. Processo

da empresa dos
profissionais B e C.
- Os processos
metodologias
3.3 As respostas em discusso

Assim que os profissionais do mercado responderam s questes, foi possvel analisar
as respostas associadas a uma sintese de
opinio, sempre retomando os conceitos tericos estudados anteriormente.
- Os papis dentro das empresas
Como mostra o Quadro 2 visto na pgina
anterior, cada profissional entrevistado possui um papel diferente dentro das empresas,
e desta maneira foi possvel verificar como
elas funcionam sob diferentes pontos de
vista, e onde cada profissional entra durante as etapas dos projetos. O profissional A,
por exemplo, entende que o designer deve
estar presente desde o incio do projeto, mas
percebe que em empresas que j trabalhou
isso nem sempre acontece, visto a falta de
tempo e planejamento em certos projetos.
Os profissionais D e E concordam em parte
com o profissional A, pois acreditam que o
designer deve participar de boa parte do processo, excluindo apenas o briefing.
Falando em briefing, esta etapa foi muito reforada pelos entrevistados, todos falaram
da importncia do briefing dentro de um
projeto. Cada empresa tem seu mtodo de

briefing, alm disso possuem perfis diferentes de clientes. O profissional E ressaltou a
importncia da prospeco, ento eles alm
de receberem as necessidades dos clientes,
tambm prope projetos. Segundo o autor
Peter L. Phillips (2011) o briefing uma etapa que deve conter todas as informaes
relevantes aos interessados do projeto, geralmente a primeira etapa do projeto. Pode
ser feito de inmeras maneiras, mas crucial
para qualquer projeto de design.
A questo do dilogo entre os profissionais
dentro da empresa tambm foi ressaltada
pelos entrevistados, segundo o Profissional
B:
Tanto eu quanto a equipe devem estar sempre alinhando com as outras
equipes. As ideias e dificuldades dos
projetos, sendo ele mobile ou no.
Ainda existe no mercado um ego
tipo: o projeto meu. Mas eu no
acredito nessa histria, os projetos
devem ser construdos em conjunto,
com um equipe com diferentes skills.
(Profissional B)
Em relao a pergunta 09, que fala deste

dilogo entre as equipes, os profissionais
acreditam que h muito a melhorar, no caso
do Profissional B h dilogo, mas no caso
de
criao/
as
Como j falado anteriormente, a metodologia

um caminho programado (Coelho, 2008),
ento foi importante questionar s empresas
quanto a documentao deste caminho feito
nos projetos, se existia um padro de base
entre todos, e se existia um documento com
tais informaes. O Profissional E enviou
para a autora deste trabalho a proposta metodolgica de seus projetos que foca em mobile, j o Profissional A explica que em sua
empresa no existe tal documentao. Os
projetos geralmente seguem um padro de
processo mas isso no documentado. Os
profissionais C e D desenharam o processo
de criao de suas empresas durante a entrevista, e contam que em geral realizado
desta maneira, porm isto no documentado por falta de tempo e tambm porque seria
difcil manter atualizado. Um ponto negativo
desta falta de documentao apontada pelo
profissional D a adaptao de novos funcionrios ao processo de trabalho.
Em relao a necessidade de uma metodologia focada em mobile, o Profissional E acredita ser importante e usa sua metodologia
desta maneira, j o Profissional A aponta que
no necessariamente precise de uma metodologia especfica, j que em sua empresa
no h uma metodologia estabelecida, mas
explica que em projetos mobile deve haver
mais cuidado nas etapas de arquitetura de
informao e mais perodos de testes antes
da publicao. Ao olhar a metodologia de
Garrett (2003) o Profissional A entende que
poderia acrescentar pontos no inicio e no
final da metodologia para atender questes

de gesto que o mobile necessita.
Do ponto de vista da gesto, o profissional D
entende que no necessita de uma metodologia especifica para mobile, mas olhando a
metodologia de Garrett (2003) percebe que
poderia abarcar mais etapas focadas no mobile, concordando com os cuidados explicados pelo Profissional A.
- Necessidades dos projetos
As perguntas 02, 04 e 07 tem a inteno de
entender como as empresas se relacionam
com os clientes e como elas aplicam diferentes tecnologias (Mobile First, App, WebApp,
Responsivo) em seus projetos.
A Profissional C explica que com o aumento
do uso de smartphones as marcas querem
estar presentes nesse tipo de mdia, e algumas sem pensar em uma estratgia apenas
querem um aplicativo para se fazer presente. A partir deste contexto a empresa de C
se posiciona de maneira a questionar a necessidade dos projetos, e durante o briefing
certas vezes redirecionam as propostas para
onde elas podem ser mais eficazes e chegar
ao pblico alvo de fato de seu cliente.
Quando os projetos iniciam necessrio
definir como ele ser feito, para que plataformas, pois isso ir interfirir totalmente no
pblico alvo, no cronograma de projeto, na
necessidade de diferentes profissionais, etc.
Os profissionais concordam que existem variveis para decidir se ser um projeto responsivo, app ou webapp, onde os principais
so: tamanho do projeto, oramento disponvel e prazo, entre outras variaveis que podem surgir.
O Profissional D entende que o App tem
mais funcionalidades do que o WebApp, ento esta varivel importa durante a deciso
de projeto, e ainda explica que para projetos
institucionais geralmente fazem sites responsivos, j para produtos geralmente fazem
Apps no modelo do Mobile First.
alm desta base metodolgica de Garrett,

em grandes projetos mobile existe uma infinidade de diferenas e especificidades que
uma metodologia especfica poderia atender.
O Profissional A explica que sua empresa

trabalha mais com App, j o Profissional C
trabalha mais com WebApp.
Um dos pontos mais importantes das entrevistas foi o momento de perguntar sobre os
cudados na hora de projetar para mobile, e
o surpreendente foi que a maioria dos profissionais citaram os mesmos tens, reforando ainda mais sua importncia. Seguem os
tens:
- Diferenas do Desktop e Mobile

Referente a pergunta 11 os profissionais
concordam que existem muitas diferenas
entre projetos para desktop e projetos mobile. O Profissional B ressalta:
Sim, exitem muitas diferenas, a forma
de consumo acredito que a principal. No desktop, existem mais possibilidades que podero ambiente que
ele se encontra, ele consome muitas
coisas ao mesmo tempo. Para o mobile isso existe mas no com a mesma
intensidade.Tambm procuro planejar
o contedo, junto com os redatores,
pois tambm acredito que para alguns
projetos no necessrio ter todo o
contedo do desktop na verso mobile, pois essa deve ser muito mais
focada no interesse do usurio.Outro
fato muito importante so os diferente
devices que devem ser considerados.
(Profissional B)
O Profissonal A concorda com B e ressalta

que alguns projetos mobile podem explorar
mais a questo da descoberta, visto a maior
interao e atualizao constante de novas
possibilidades.
O Profissional C explica que quanto maior
o tamanho de um projeto maior vai ser
a diferena entre o desktop e o mobile, o
Profissional entende que existem metodologias/processos de trabalho bsicos que
podem atender a varios tipos de projetos,
e olhando para os planos de Garrett (2003)
cita este como um exemplo disso. Porm,
- Cuidados para projetar para mobile
- Maior dificuldade: Os profissionais acreditam que por ser algo relativamente novo
exige mais trabalho, inclusive de pesquisa
para acompanhar as atualizaes e novas
tecnologias que permeiam a realidade do
mobile. Alm disso, necessario pensar em
como projetar para os diferentes sistemas
operacionais, onde os principais so iOS,
Android e Windows Phone, o que exige mais
demanda de trabalho na arquitetura de informao e navegao. Alm da dificuldade
tcnica, existem outros diferentes contextos
onde o usurio usa o smartphone do que um
desktop, e isso gera uma ateno limitada
do usurio que certas vezes divide a ateno
entre duas tarefas simultneas.
- Interaes: As interaes no mobile so
completamente diferentes do desktop e alm
disso ainda existem diferenas entre cada
dispositivo, sendo necessrio cuidado, pesquisa e ateno para projetar interaes. O
fato da tela ser pequena e dos dedos do usurio cobrirem parte da tela tambm deve ser
levado em considerao, a regra do polegar
efetivamente se aplica na prtica.
- Densidade: Outra diferena do desktop,
e um importante cuidado ressaltado pelos
profissionais a densidade, que, como j
comentada anteriormente deve ser projetada em tamanho maior do que o real, diferente do desktop. Pelo motivo dos usurios de
mobile nem sempre estarem conectados a
redes Wifi, e sim de redes 3G fica uma rivalidade entre qualidade x peso de imagens e
cones, que devem ser cuidadosamente projetados para ficarem em alta resoluo e que
carreguem rpido. O Profissional D ressalta
que em sua empresa cada vez tem aumentado os cones em vetor para que justamente
se adaptem a diferentes tamanhos sem perder qualidade de imagem.
- Gestos: a interao atravs de gestos
uma mudana fundamental entre projetos
desktop e mobile visto que no mobile nao
existe o mouse, a interao atravs dos
dedos, ou seja, dos gestos. Os profissionais
concordam que o designer precisa projetar
pensando no gesto, no apenas desenhando a tela esttica. O profissional precisa
projetar de forma dinmica, pensando nos
gestos e nas transies. Vale ressaltar que
a viso dos profissionais convergem com o
estudado no captulo anterior a respeito de
gestos e transies.
- Texto: a questo do texto em projetos mobile deve ser feita com cuidado, segundo os
profissionais, pois o tamanho no pode ser
pequeno demais, nem grande demais, se a
fonte possuir um trao muito fino em contextos onde h reflexo ou pouco brilho na tela
pode se perder o trao confundindo com o
fundo, tambm deve se atentar para a regra
do polegar, pois os dedos tapam parte da
tela, ento a posio do texto deve ser bem
pensada. Alm disso por ser touchscreen
tambm importante perceber a dificuldade
de digitar, portanto vlido diminuir a quantidade de input de texto pelo usurio ao mximo. Caso seja necessrio o input de texto
interessante projetar a tela para funcionar
na horizontal, possibilitando maior facilidade

na digitao do texto.
- Tamanhos de botes: Como j exposto nocaptulo anterior, os profissionais atentam
para o conceito de Generous Borders, que
implica em fazer botes grandes o suficientes para o toque de dedos e de espaamento
suficiente entre elementos para evitar confuses na interao, evitando erros.
- Descoberta: com a atualizao constante
dos sistemas operacionais, e com a diversidade de dispositivos mveis se torna um
desafio constante projetar, e para o usurio
isso tambm acontece, proporcionando que
o designer se aproprie de tais inovaes
para propor novas interaes, quebras de
padres e designs inusitados, criando interaes com a dinmica da descoberta presente em jogos, etc.
- Maior perodo de testes: Justamente pela
diversidade de dispositivos e diferentes sistemas operacionais, mencionados a cima,
preciso maior perodo de testes, os profissionais deram grande nfase a essa diferena,
pois importante testar em diferentes dispositivos, com diferentes resolues e sistemas operacionais, principalmente quando
webapp que acessado de varios sistemas
operacionais. Alm disso deve estar sempre
presente no cronograma o tempo de publicao e aprovao das lojas dos sistemas
operacionais, pois somente com as respectivas aprovaes que o aplicativo poder ser
baixado pelo usurio.
3.4 Consideraes
Diante dos dados analisados, reunindo as
entrevistas e a pesquisa bibliogrfica possivel perceber a importncia deste dilogo
entre teoria e prtica, entre academia e mercado para validar certas etapas de projeto e
para entender que outras nem sempre so
aplicveis. Para a autora desta pesquisa as
entrevistas realizadas foram de grande valia,
pois um dos objetivos do presente trabalho
era analisar este dilogo, instigando que
este seja constante para os profissionais do
mercado. Um resultado inusitado foi a grande quantidade de profissionais que afirmaram pesquisar constantemente durante seu
trabalho, pois assim compreendem melhor
novas tendencias, tecnologias e processos, como por exemplo a metodologia de
WROBLEWSKI (2014) que trs o conceito de
Mobile First.
A partir dessa anlise e juntamente com a teoria estudada possvel propor a DesignMob.
3.5 Proposta da DesignMob

Com o resultado das anlises feitos com as
entrevistas, questionrios e estudos tericos
ser proposta a adaptao da metodologia
de James Garret (2003) focada em projetos
para dispositivos mveis: a DesignMob.
A DesignMob dividida em 7 grandes etapas, e dentro de cada uma delas existe uma
srie de passos, que dependendo do projeto, sero necessrios ou no. Isso acontece
porque a DesignMob pretende atender projetos de diferentes portes, compreendendo
desde os pequenos, que talvez no necessitem de todos os passos at os grandes que
passam por todos.
A ordem das etapas no rgida, apenas a

primeira e a ltima etapa so fixas, pois de
modo diferente perdero o sentido.
Dentro de cada etapa a ordem flexivel, variando de acordo com cada projeto e tambm ponderando a relevncia de pontos
especficos dentro do contexto dos projetos.
Durante as etapas metodolgicas so citados alguns papis dos profissionais dentro
das empresas, tais como atendimento, gerente de projeto, arquiteto de informao, redator, designer, profissional de mdia, financeiro/analista de negcios, desenvolvedor, e
analista de mtricas. importante ressaltar
que na realidade profissional estes papeis
podem variar, principalmente na realidade
de pequenas empresas para grandes empresas, mas mesmo assim tais papis so
utilizados como ilustrativos, a fim de facilitar o entendimento e a utilizao prtica da
DesignMob.
Demonstra-se a seguir todo processo metodolgico da DesignMob:
e riqueza de informaes ao projeto, pois

liga as principais necessidades do cliente,
juntamente com informaes do cliente
empresa.
Pr Projeto
Estratgia
Escopo
Estrutura
Os projetos geralmente iniciam de duas maneiras: necessidade ou oportunidade. A necessidade est relacionada com uma demanda de mercado vinda de um cliente, e ento a
etapa inicia com o briefing. J a oportunidade est relacionada com a prospeco, onde
a prpria agencia/startup prope o projeto.
Desta segunda forma geralmente no h a
etapa do briefing.
Ainda nessa etapa, a equipe de atendimento
realiza uma prvia pesquisa de benchmarks,
para que na reunio com a equipe, feita na
prxima etapa, j haja certa aproximao
com a realidade do mercado em questo.
- Briefing: Esse passo realizado quando

os projetos surgem da demanda do mercado. Geralmente realizada em um dos primeiros contatos da empresa com o cliente.
Desenvolvimento
caracterizado como uma coleta de informaes essenciais do cliente, tais como:
objetivos do projeto, informaes sobre a
empresa, sobre oramento disponivel para
Publicao
o projeto, sobre pblico alvo e cronograma
disponvel para a criao do projeto. Existem
Figura 36. Estrutura DesignMob Fonte: Da autora (2014) muitos modelos de briefing, mas geralmente
as empresas adaptam de acordo com seu
perfil e tambm de acordo com o projeto.
3.5.1 Pr projeto
Superfcie
A etapa do Pr Projeto, como j diz no nome,

o que acontece antes do projeto iniciar de
fato, mas uma etapa essencial, pois dela
depende a continuidade do projeto.
Quando finalizada a coleta de informaes,

importante organizar tudo em um documento, pois este ser utilizado como fonte de informaes durante todo o projeto.
Alm da continuidade ou no do projeto, esta

etapa quando bem feita garante qualidade
Nos projetos mobile, especificamente,

importante relacionar as informaes dadas pelo cliente com as especificaes de
mobile. Em relao ao cronograma, por

exemplo, importante contar o tempo de
aprovao nas stores, quando for App, pois
esta etapa demanda certo tempo. Em relao ao pblico alvo do cliente, importante
definir para qual sistema operacional ser
produzido, e se for para mais de um, se h
cronograma e oramento para isso. Tais informaes so importantes pois sero validadas na reunio interna na seguinte etapa.
- Prospeco: Esse passo surge da oportunidade, geralmente parte da empresa, ou
de startups uma idia, e esta apresentada
no a clientes, mas a investidores, que compram o projeto. Quando ocorre esse tipo de
projeto, geralmente no h briefing, pois no
tem um cliente a quem pedir informaes,
mas mesmo assim h um documento com
as informaes do projeto, para que durante a construo do todo, este possa ser
consultado.
Este documento de projeto, alimentado
durante todas as etapas, e, de certa forma,
serve para organizar o processo, e tambm
para que possa ser acessado depois do trmino do projeto.
- Pesquisa de Benchmarks: Esse passo
uma pesquisa inicial feita, geralmente, pela
equipe que realizou o contato com o cliente
para o briefing. A pesquisa de benchmarks
um processo de comparao de produtos,
servios entre os concorrentes, permite realizar comparaes de processos e de produtos finais. A finalidade a aproximao com o
mercado real, com os concorrentes do cliente e do projeto. Os concorrentes do cliente,
so as marcas que produzem produtos similares. J os concorrentes do projeto, podem
ser empresas de outros segmentos que tm,
por exemplo, aplicativos semelhantes.
Nos projetos mobile comum empresas
criarem servios que no estejam diretamente relacionados aos seus produtos/servios,

por isso essa pesquisa de concorrentes
deve ser feita das duas formas explicitadas
anteriormente.
3.5.2 Estratgia
A etapa da estratgia onde acontecem as
principais tomadas de deciso que iro nortear todo o projeto. nessa etapa que os lderes das equipes se reunem para discutir
as possibilidades do projeto. Para realizar
essa etapa importante que o documento
do briefing do projeto esteja presente, bem
como a pesquisa de benchmarks.
A partir da so feitas as pesquisas de pblico alvo, definies tcnicas do projeto
e com esses dados possivel realizar o
Cronograma e Oramento do projeto. Mas
porque a pesquisa de pblico alvo se este
item estava presente no briefing? Porque
importante que a empresa verifique junto
com sua equipe a validao destas informaes, pois certas vezes o cliente saber realmente seu pblico, mas certas vezes no.
O cronograma e o oramento tambm so
realizados dentro do que foi passado no
briefing, alinhando o cronograma interno de
trabalho com o do cliente, e o mesmo ocorre
com o oramento.
- Kick Off: Esse passo uma reunio com
lderes de cada rea de conhecimento do
projeto, tais como: atendimento, gerente de
projeto, designer, desenvolvedor, analista de
negcio, profissional de mdia. Nessa reunio ser definida a estratgia do projeto, e
para isso importante definir as reas envolvidas, a tendncia esttica, a estratgia tecnolgica e a definio do time que realizar
o projeto.
Durante o Kick Off do projeto importante

a existncia de um roteiro, ou seja, uma lista de quesitos que precisam ser decididos,
para que nada fique de fora.
Nos projetos mobile nesta etapa que deve
ser definido as tecnologias utilizadas, se ser
um App ou WebApp, quais as linguagens
a serem utilizadas, definio de possveis
feeds, ou seja, de recursos a serem utilizados, tais como: cmera, gps, conexo com o
servidor em tempo integral, conexo com a
internet, realidade aumentada, entre outros.
De acordo com tais especificaes possvel a escolha do time de profissionais que ir
realizar o projeto, verificar a necessidade de
contratar terceiros ou mesmo de realizar cursos de formao.
- Pesquisa de pblico: este passo, como
comentado anteriormente, pretende verificar
o pblico alvo do cliente, pesquisando informaes sobre este pblico, principalmente
verificando a relao deste com a tecnologia,
percebendo qual sistema operacional usam,
se tem acesso a internet, poder aquisitivo,
se costumam pagar por aplicativos, dentre
outros quesitos especficos de cada projeto.
- Cronograma e oramento: Com o plano de estratgia montado, essencial realizar um cronograma vivel, bem planejado de
acordo com a realidade da empresa e junto
montar o oramento.
- Aprovao do cliente: Feitos o cronograma e o oramento necessria a aprovao do cliente para seguir o projeto.
3.5.3 Escopo
A etapa do escopo prope a criao da base
do projeto, com a criao de personas, cenrios de uso, alm dos requisitos de contedo
do projeto.
- Personas: so usurios fictcios criados
com inteno de representar tipos especficos do pblico alvo. So teis pois possuem
caractersticas do pblico real. Para representar a persona pode ser feita uma prancha
de temperamento, ou seja, uma prancha que
rena em imagens e tpicos as caractersticas desse usurio. Em projetos centrado no
usurio isso ajuda a orientar decises como
de navegao, interface e at de recursos
finaiceiros.
- Cenrios: Diferente dos projetos desktop,
nos projetos mobile importante o estudo
dos possveis cenrios que o usurio utilizar o aplicativo. Isso ocorre por causa da
mobilidade, que proporciona ao usurio utilizar seu dispositivo mvel em muitos lugares,
inclusive na rua.
A criao destes cenrios pode se dar tambm em forma de pranchas feitas de imagens, e importa para perceber e aprimorar
detalhes de usabilidade, navegao e da experincia em geral do usurio no aplicativo.
Questes como reflexo na luz, durao da
bateria do dispositivo, necessidade de conexo com wifi ou 3G, rudos, movimentao
fsica do usurio podem influenciar completamente no projeto, ento importante pesquisar sobre onde o usurio poder utilizar o
aplicativo para que o projeto seja construdo
focado na experincia total do usurio, ou
seja, sem ignorar o contexto ao seu redor.
- Requisitos de contedo: a definio
dos elementos de contedo necessrios, sejam fotos, vdeos, textos, dentre outros. importante que esses contedos estejam prontos, ou encaminhados antes da criao dos
fluxogramas e wireframes para que eles possam ser feitos baseados no contedo real.
- Jornada do usurio: Este passo se refere ao estudo de como o usurio ir interagir

com o aplicativo projetado. diferente de
fluxogramas e sitemaps pois no necessita
mostrar todas as telas existente e as conexes entre elas, mas sim os objetivos do
usurio dentro do aplicativo, as atividades
que ele prentende executar. No aplicativo
Instagram por exemplo, a jornada do usurio
poder ser basicamente de duas maneiras:
entrar para postar uma foto ou para olhar o
feed. claro que existem outras funcionalidades, mas estas so as principais, e so
essas jornadas que importante observar
com inteno de otimizar a experincia.
Como nesta etapa o projeto ainda no tem
as telas importante esse estudo para propor diferentes solues, diferentes jornadas
possveis com intuito de chegar em um ideal.
- Features/funcionalidades: baseado
na etapa da estratgia, onde eram definidos
possveis features, agora a partir das personas, dos cenrios e da jornada do usurio
possvel polir ainda mais esta deciso, definindo especificamente as funes que o projeto oferecer.
3.5.4 Estrutura
Nessa etapa o projeto comea a tomar forma,
que se prope a criao dos fluxogramas,
sitemaps, wireframes, storyboards e prottipos navegveis com o intuito de desenhar e
organizar visualmente tudo que foi pensado,
pesquisado e definido anteriormente.
A partir dessa etapa se escreve menos no
documento de briefing, pois o projeto comea a ficar mais desenhado do que escrito.
O sitemap, o fluxograma, os wireframes, os
prottipo e os storyboards so etapas que
podem ser construidas em conjunto, ou seja,
inicia-se pelo sitemap, mas o sitemap final
geralmente s estar definido aps a construo dos wireframes ou do prottipo.

- Sitemap: Esse passo visa construir de
forma basica a definio das telas de um
projeto organizadas hierarquicamente, pois
com as telas definidas se torna mais claro a
construo dos wireframes e do fluxograma.
- Fluxograma: nesse passo, com base no
sitemap, se constri a relao entre as telas,
ou seja, como o usurio pode navegar entre elas, prevendo mensagens de erro, bem
como o facil acesso e retorno a cada tela
desejada.
- Wireframe: nesse passo importa organizar os contedos, estabelecer hierarquicamente as relaes de contedos dentro
das telas. Nesse momento no importa ainda o design visual, apenas a diviso de espaos e organizao das informaes nas
telas. Como nos projetos mobile as telas
so pequenas, interessante construir os
wireframes pensando tambm na interao,
prevendo interao entre telas, tamanhos de
botes, tamanhos de texto e quantidade de
texto, etc.
Os wireframes no necessitam, pelo menos
no inicialmente, ser de alta fidelidade, podem ser rascunhos feitos at mesmo mo,
pois assim otimiza o processo para testar
nos prottipos. Aps feitos os prottipos,
quando necessrio, podem ser feitos alguns
wireframes de alta densidade.
- Prottipo navegvel: Consiste em demonstrar as interaes entre as telas de
forma funcional. Existem muitas maneiras
de fazer prottipos, podem ser codificado
em html, por exemplo ou feito em flash ou
em programas e sites que disponibilizam tal
servio.
- Storyboard: Consiste em demonstrar as

transies que iro ocorrer durante as interaes. O storyboard, diferente do prottipo, esttico, demonstra quadro a quadro
como ir acontecer a transio ou interao
desejada.
- Reunio de lderes do time: Este o
momento da equipe rapidamente revisar o
projeto desde o incio, para verificar se os
objetivos esto sendo atingidos e se no h
erros.
- Aprovao do cliente: Estando revisado o projeto pelo time de profissionais o
projeto vai para aprovao do cliente, tendo
como entregvel o prottipo e tambm o
storyboard.
3.5.5 Superfcie
Essa etapa onde o design se manifesta
inteiramente no projeto, com a criao da
identidade e a direo de arte das telas.
- Criao da identidade visual/esttica: Esse passo varia de acordo com o
projeto, pois alguns j tem identidade visual
pronta vinda do cliente de alguma campanha ou institucional mesmo. Quando no h
identidade nesse passo que criado, baseado na tendncia esttica definida no Kick
Off. Instipula-se a paleta de cores, as tipografias, as ilustraes, dentre outros elementos
principais de identidade visual. Certas vezes
apenas parte desses elementos misturam-se
com a direo de arte das telas. Ainda neste
passo existe a definio tcnica em relao
a densidade, que deve ser definida a partir
do sistema operacional a qual o projeto ser
aplicado, dos diferentes dispositivos, do oramento e do prazo.
- Direo de arte: Esse passo onde o
designer cria todas as telas baseado nos
wireframes e na identidade visual/esttica

proposta. Neste passo sero desenhadas
todas as telas do projeto, incluindo o desenho das transies de tela. Em alguns projetos pode se mostrar necessrio a construo
de um prottipo da direo de arte, e este
deve ser feito nesse momento do projeto.
- Reviso: importante que os lderes do
time revisem a direo de arte antes da aprovao do cliente para garantir melhor qualidade ao projeto.
- Aprovao do cliente: Estando revisado o projeto pelo time de profissionais o
projeto deve ir para aprovao do cliente,
tendo como entregvel a direo de arte das
principais telas ou mesmo de todas as telas
do projeto.
3.5.6 Desenvolvimento
Nessa etapa ocorre todo o desenvolvimento
tecnolgico do projeto, onde os desenvolvedores codificam e programam o aplicativo
nas linguagens estabelecidas no Kick Off.
Programao/codificao: Nesse
passo os desenvolvedores iro desenvolver
tudo que foi projetado anteriormente. importante perceber que esta etapa pode variar
de acordo com a linguagem de programao
escolhida.
- Testes internos/QA: O principal objetivo desse passo garantir um produto final
que satisfaa s expectativas do cliente,
dentro daquilo que foi acordado inicialmente. No desenvolvimento mobile, a qualidade
do aplicativo est diretamente relacionada
qualidade do processo de desenvolvimento,
portanto este passo pretende, atravs de
testes e anlises proporcionar garantia de
qualidade ao produto final.
- Aprovao do cliente: Com o projeto executado e funcionando o cliente deve

aprovar.
- Testes externos: Alguns projetos, geralmente projetos grandes, com oramentos
altos, realizam testes externos, que podem
ser feitos por meio de diferentes mtodos.
Todos os testes externos tem o objetivo de
garantir qualidade, de descobrir possveis
falhas e erros passveis de melhorias antes
da publicao do projeto.
- Reviso: Feitos os testes importante
uma reviso a fim de verificar se as falhas
foram corrigidas. Esta reviso geralmente
feita internamente pelos lderes do time.
3.5.7 Publicao
A publicao o perodo de entrega para o
cliente, onde s vezes h a publicao nas
Stores. tambm o momento de avaliao
do projeto com a equipe interna.
Se o produto for um App, necessrio a publicao na store correspondente, caso seja
um WebApp o mesmo processo de um site,
basta colocar no servidor.
- Submisso nas Stores: Cada sistema
operacional possui uma maneira diferente de se publicar os aplicativos, inclusive
tempos diferentes para a aprovao. Para
submeter necessrio ter login de acesso a
cada store.
- Avaliao da equipe interna: Durante
o perodo de submisso nas stores, ou mesmo aps a publicao importante avaliar
internamente o time que realizou o projeto.
Esse tipo de atitude garante aprimoramento
a cada projeto.
- Publicao: Quando a store aprovar o
projeto automaticamente ele publicado,
podendo imediatamente ser baixado. Essa

a ultima etapa do projeto.
- Anlise de mtricas: Depois de publicado o aplicativo, o projeto estar concludo. Porm importante retornar ao cliente
alguns dados sobre como o usurio interage
com o aplicativo. Esse tipo de dado pode ser
obtido tanto atraves da propria loja, pelas
estrelas que recebe e nmero de download,
quanto por meio do cdigo usado para programar o aplicativo que pode relatar dados.
Esses dados so importantes porque, como
dito anteriormente, projetos digitais esto
em constante movimento, portanto importante a peridica atualizao do aplicativo
baseada na anlise de mtricas.
3.5.8 Consideraes sobre a DesignMob

Baseada na metodologia de James Garrett
somada a outros conceitos tericos, assim
como o conhecimento de profissionais do
mercado de trabalho surgiu a Designmob,
uma adaptao metodolgica aplicada a
projetos de interfaces de dispositivos mveis. Toda ela foi realizada focando na prtica projetual de aplicativos ou sites mobile.
Visto todas as etapas da Designmob possvel perceber que durante todo o processo
h diferenas em relao metodologia de
Garrett. Isso ocorreu porque realmente existem diferenas significativas entre projetar
interfaces para aplicativos mveis e para
desktop. Essa diferena no impede que a
Designmob possa ser usada para projetar
interfaces para desktop ou a de Garrett para
mobile, porm quando elas so usadas para
seu fim mais especfico se tornam mais adequadas e abrangem o processo de maneira
mais completa.
4| Interface do infogrfico DesignMob
4 INTERFACE DO INFOGRFICO DESIGNMOB | 67
4.1 Identificao da proposta

Neste captulo ser apresentada a prtica
projetual desta pesquisa baseada nos estudos anteriores. A inteno da prtica da
presente pesquisa mostrar a DesignMob
de forma interativa e dinmica, para que assim seu contedo possa ser disseminado e
a metodologia seja utilizada.
Entre as possibilidades existentes a escolhida foi a criao de uma interface para um infogrfico interativo sobre a DesignMob.
A interface do infogrfico projetada para
desktop, visto que seu contedo extenso e tcnico. Tambm porque o infogrfico
pretende estar presente no ambiente de trabalho e de estudo, que geralmente feito a
partir do desktop.
Para a criao da interface do infogrfico
sero utilizadas algumas etapas da metodologia de James Garrett (2003) apresentada
anteriormente. Toda a criao do infogrfico
ser baseada no contedo da DesignMob
apresentado no captulo anterior acrescido
de links adicionais e exemplos.
criao do infogrfico como forma apropriada para cumprimento dos objetivos.
4.2.1 Escopo, Estrutura e Esqueleto

No plano do Escopo, se definem as necessidades de contedo e as funcionalidades.
O contedo do Infogrfico baseado no captulo anterior, onde a DesignMob apresentada, porm necessrio mais do que isso.
Para suprir esta falta a autora realizou uma
coleta de links relacionados com os temas
trabalhados para utilizar como apoio no infogrfico. Para organizar os links coletados
a autora criou uma tabela na plataforma do
Google Docs, onde de maneira colaborativa,
links foram sendo agregados a ela. A tabela
completa encontra-se em anexo no CD da
pesquisa. Veja na Figura 37 abaixo uma imagem da tabela:
A documentao do contedo e o projeto

de interao do infogrfico da DesignMob
encontra-se em anexo no CD da pesquisa.
4.2 Metodologia
A metodologia de Garrett (2003) prope
os seguintes planos: Estratgia, Escopo,
Estrutura, Esqueleto e Superfcie.
Aqui o plano da Estratgia no ser apresentado, pois toda a estratgia, contexto e inteno da criao da DesignMob j foi apresentada anteriormente, expondo a inteno da
Figura 37. Tabela DesignMob Fonte: Da autora

(2014)
Em relao as funcionalidades do infogrfico, ser, principalmente, para conhecer o

conteudo textual da Designmob, dividido
em diferentes telas para facilitar o acesso ao
contedo de forma ordenada. Alm disso o
usurio poder interagir e agregar conhecimento Designmob de maneira colaborativa
enviando links relacionados que sero publicados no Infogrfico mediante avaliao.
A partir do plano da Estrutura e do Esqueleto
foram criados um sitemap e wireframes para
o projeto. Os wireframes foram de total importncia visto a quantidade de contedo
presente na Designmob, assim facilitando a
compreenso do usurio ao navegar dentre
as telas.
O sitemap bem como os wireframes foram

criados a partir de uma estrutura de papel
com os desenhos criados mo. Isso possibilitou uma srie de alteraes e refaes
necessrias para chegar em uma ordenao
clara do contedo, bem como uma diviso
simples de pginas.
O infogrfico ter uma navegao por blocos, com rolagem horizontal e vertical.
A home e a tela principal de cada etapa da
DesignMob esto organizadas com rolagem
vertical, passando de forma ordenada por
cada etapa. Para navegar dentro de cada etapa h a navegao horizontal. Acompanhe a
construo do sitemap e dos wireframes a
seguir:
Figura 38. Sitemap e
wireframes do projeto.
4.2.3 Superfcie
No plano de superfcie foi criado o design
visual do infogrfico, envolvendo a criao
da marca e das telas. Optou-se pela utilizao do Flat Design, visto que uma tendncia em diversos websites e alguns sistemas
operacionais.
Primeiramente foi criada a marca composta
por logotipo e smbolo. Os dois elementos
foram misturados fazendo com que o conjunto da marca forme um elemento s.
A tipografia foi baseada na fonte Simplifica,
porm sofreu grandes alteraes de forma e
peso. Foi escolhida essa tipografia por ser
simples, sem serifa e sem transio de trao, mas que demonstra elegncia. A caixa
alta foi escolhida para ficar mais rgida, visto
que uma metodologia e pressupe ordenamento e organizao. A mudana de peso da
Figura 39. Paleta de

cores. Fonte: Da autora
(2014)
tipografia da palavra design para mob

para ressaltar tanto os seus significados separados quanto juntos.
O smbolo representa um smartphone, com
inteno de passar a mensagem da designmob de forma clara e precisa, sem confundir
a quem olhar.
As cores principais so o azul, o verde e o
amarelo que compe a marca, mas alm
destas cores outras foram escolhidas para
compor a paleta de cores da identidade visual. A paleta de cores foi definida baseada em
referncias de Flat Design, encontradas em
muitos websites.
Veja nas figuras a seguir a marca em suas
principais aplicaes, assim como a paleta
de cores:
Figura 40. DesignMob

Figura 41. Identidade

Visual DesignMob
Figura 42. Home

DesignMob Fonte: Da
autora (2014)
Com a marca e a paleta de cores definidas a

continuidade do trabalho se deu na direo
de arte das telas do infogrfico.
inteno de categorizar os contedos, porm

para manter a identidade o grid e a barra do
topo permanecem iguais em todas as telas.
A pgina inicial composta por 9 telas que

podem ser visualizadas a partir da rolagem
vertical do infogrfico. Inicia-se pela home
que mostra uma viso geral da metodologia. Na medida que o usurio faz a rolagem
as etapas da metodologia vo aparecendo
ordenadamente, e por ltimo uma tela de
fechamento.
Cada etapa tambm possui uma ilustrao

conceitual relacionada o seu contedo.
Todas as ilustraes foram feitas baseadas
na paleta de cores da DesignMob e seu processo criativo se deu atravs de imagens de
referncias, deciso do desenho e criao
da ilustrao.
Cada etapa possui uma cor principal com a
Veja na figura a seguir algumas telas do

infogrfico:
Para acessar o contedo completo de cada

etapa o usurio deve usar a rolagem horizontal, usando os botes de iniciar, avancar e voltar. Desta forma o usurio acessa
todo o contedo de cada etapa, que inclui
conceitos, checklists e links externos de

exemplos, modelos, etc.
Veja na figura a seguir algumas telas internas
do infogrfico:
Figura 43. Telas

DesignMob Fonte: Da
autora (2014)
Visto as imagens das principais telas do infogrfico possvel perceber como ele funciona. A inteno que o usurio entre no
infogrfico e tenha dois tipos de experincia:
resumida ou completa.
A verso resumida trata de navegar apenas
pela rolagem vertical, onde o usurio ir ver
quais so as etapas da designmob mas no
passar por cada ponto especfico de cada
etapa.
A verso completa trata da navegao atravs da rolagem vertical e tambm horizontal,
onde o usurio ir ver todas as etapas da designmob e todos os passos as quais cada
etapa possui.
Desta maneira o usurio tem contedo metodolgico e referencial tcnico para entender como funciona o processo de criao de
interfaces para um dispositivo mvel e at
mesmo projetar para ele.
O presente projeto de interface do infogrfico, se aplicado de forma completa e lanado
na internet seria o principal meio de divulgar
e ensinar a designmob.
Este captulo apresenta a prtica projetual
como o processo de construo de um projeto de interface do infogrfico da adaptao
metodolgica, a DesignMob. A inteo foi
criar uma interface simples que proporcionasse contedo de forma dinmica e prtica
facilitando o aprendizado da metodologia.
Desta forma a pesquisa se torna completa ao
finalizar a pesquisa terica somada prtica.
Figura 44. Telas internas DesignMob Fonte: Da autora (2014)
74
75
Consideraes finais
Nossa realidade est repleta de relaes
entre o homem e a tecnologia. Essa relao
tem se tornado cada vez mais natural, mais
habitual, a tecnologia tende a fazer parte
nosso do cotidiano.
Dentre os equipamentos tecnolgicos utilizados diariamente esto os tablets e os
smartphones, os quais crescem os nmeros
de venda dia a dia.
Partindo dessa realidade importante que
os designers estejam preparados para lidar
e liderar projetos para tablets e smartphones, ou seja, projetar para mobile.
Nesse contexto surgiu a presente pesquisa,
partindo do desafio: como projetar interfaces para mobile? Para isso, foi preciso ir em
busca de conhecimentos de metodologia de
projeto, de mobilidade, dentre outros que pudessem qualificar teoricamente o trabalho.
A primeira parte da pesquisa foi uma busca
por metodologias projetuais aplicadas interfaces para dispositivos mveis, mas nenhuma metodologia encontrada prpria e
especfica para esse tipo de interface. No entanto vrias metodologias projetuais de design foram encotradas, ento duas delas foram estudadas mais a fundo. A metodologia
de Bruno Munari, que tem um cunho mais
abrangente, mais generalista, ento abrange
o design grfico, de produto e at mesmo o
digital. A metodologia de James Garrett, que
tem um cunho mais especfico, abrangendo
o design digital focado em desktops.
A partir do estudo destas metodologias, percebendo que nenhuma delas se aplica especificamente e adequadamente aos projetos
de interfaces para mobile surgiu a questo
da presente pesquisa: Como adaptar uma
metodologia de projeto de interfaces digitais
para aplicao em projetos para dispositivos
mveis (smartphones e tablets)?
Para propor uma adaptao metodolgica
foi necessrio entender a dinmica e as caracteristicas da mobilidade. Nesse momento do estudo pode ser percebido a peculiar
volatibilidade do mercado, que est sempre
em perodo de mudanas e atualizaes,
principalmente em relao a produtos digitais, que so produtos vivos, ou seja, no
permanecem estticos da maneira que foram lanados, mas se atualizam a cada dia.
importante tambm destacar que ocorre
a mobilidade no ambiente social, ou seja,
ela trs mudanas na rotina das pessoas a
partir da utilizao de diversos apps em seu
dia-a-dia.
Para compreender como projetar para mobile importa tambm identificar os mtodos
e as tcnicas utilizadas nos projetos de interfaces digitais para dispositivos mveis.
Nesta etapa foram estudados padres de
estrutura, padres de design, sistemas operacionais existentes, caractersticas tcnicas
em relao as categorias existentes com
o objetivo de aprender a explorar todas as
possibilidades do mobile, mesmo sabendo
que impossvel prever todas as possibilidades, visto essa atualizao constante dos
smartphones, tablets e da tecnologia em

geral.
Deste modo, importa pesquisar a realidade do mercado de trabalho, para entender
como os projetos so realizados no dia-a-dia. Para compreender tal realidade foram
realizadas entrevistas com profissionais do
mercado de trabalho, que enriqueceram a
pesquisa confirmando premissas estudadas
na teoria, modificando alguns conceitos e
acrescentando outros.
A sntese dos contedos estudados atrelados s informaes obtidas do mercado de
trabalho foram fundamentais para a criao
da Designmob. Pode-se perceber que tanto
a academia quanto as empresas possuem
informaes relativas a este processo, bem
como carncias. Neste sentido infere-se que,
ao juntar estes dois universos, uma metodologia que abranja estes dois segmentos
pode vir a ser mais completa.
Ento baseada na metodologia de James
Garrett somada aos presentes conceitos
tericos, assim como os conhecimentos de
profissionais do mercado de trabalho entrevistados, a Designmob surgiu como uma
daptao metodolgica aplicada a projetos
de interfaces de dispositivos mveis.
Mas apenas o contedo textual da
Designmob no parecia o material mais adequado para os designers utilizarem. Ento
baseado na realidade de trabalho dos designers, foi criado o projeto de interface do
Infogrfico interativo da Designmob.
Ao final da pesquisa conclui-se que desde

o modo de como a Designmob foi criada, a
partir dos preceitos da academia e mercado,
at o modo como ela apresentada na forma
de um infogrfico interativo, um resultado
satisfatrio de como adaptar uma metodologia de interfaces digitais para aplicao em
projetos para dispositivos mveis, mais especificamente smartphones e tablets.
Concluda a criao da Designmob importa
ressaltar que durante todo o processo de
pesquisa e criao da Designmob as diferenas entre projetar para desktop e para
mobile foram surgindo, e so essas diferenas que enriquecem a pesquisa, so essas
diferenas, que quando bem entendidas e
projetadas adequadamente podem ser a diferena crucial entre um aplicativo bem resolvido ou no.
Vale lembrar que essa diferena no impede
que a Designmob possa ser usada para projetar interfaces para desktop ou a de Garrett
para mobile, porm quando elas so usadas
para seu fim mais especfico se tornam mais
adequadas e valorizam o processo de maneira mais completa.
Finalmente espera-se que os resultados da
presente pesquisa possam contribuir para
a criao de aplicativos cada vez com mais
qualidade e com processos mais organizados. A autora acredita que o uso de metodologias de projetos bem aplicadas podem
trazer timos resultados e introduzir uma
dinmica de aprendizado, documentao e
pesquisa constante de quem a aplica.
76
77
A Designmob, assim como os dispositivos

mveis, est em constante atualizao, em
um processo que propicia a construo do
dilogo com a academia e o mercado de trabalho para trazer constantemente o processo mais adequado desses projetos.
Recomendaes para trabalhos

futuros
Ao final desta pesquisa, ainda possvel
traar alguns possveis caminhos a partir
da metodogia adaptada nesta pesquisa, a
DesignMob. Entre estes, podemos destacar:
- Enviar a pesquisa aos profissionais do mercado de trabalho que foram entrevistados e
tambm a especialistas no mbito do mobile
para que demonstrem um parecer mediante
seu ponto de vista;
- Realizar testes em agncias para validar a
designmob, a fim de verificar sua eficincia e
eficcia em projetos mobile e ento qualific-la e atualiz-la de acordo com as novas possibilidades existentes;
- Criar um ambiente colaborativo para atualizao constante da DesignMob, visto as tecnologias e devices relacionados ao objeto
de pesquisa possuem atualizaes tanto de
software quanto hardware constantemente.
Nota da autora
Manuela Meurer Doerr graduanda do Bacharelado em Design Digital pela Universidade
Federal de Pelotas, onde parte de sua formao foi na La Salle College Bogot durante um
intercmbio na Colmbia intermediado pela prpria UFPel, tcnica em Programao Visual
pelo Instituto Federal Sul-riograndense e tambm graduanda em Direito pela Universidade
Catlica de Pelotas. Atualmente trabalha como profissional freelancer em direo de arte e
fotografia. Anteriormente j trabalhou como designer na Embrapa Clima Temperado, como
arte finalista na Incomum e como assistente de arte e arquitetura de informao na Santa
Transmedia.
A autora sonha em mudar o mundo e acredita que o design, e tambm o direito, so timas
ferramentas para trilhar esse caminho. Possui interesse em seguir na rea acadmica, visto
que seu interesse em dar aula vem desde a infncia. O interesse pelo design comeou durante seu ensino mdio quando conheceu o curso de Programao Visual do IF-Sul.
Acredita que um mundo repleto de design pode ser um lugar melhor para se viver, e para isso
entende que o designer deve trabalhar constantemente em pesquisa e em projetos prticos.
Esse seu peso nas costas pode ser suas asas paradas
Autor desconhecido
78
79
Referncias
bibliogrficas
AMBROS, Luisa. Diferena entre Aplicativos
Nativos, Hbridos e Mobile Web Apps. disponvel em < http://luisaambros.com/blog/
diferenca-entre-aplicativos-nativos-hibridos-e-mobile-web-apps/ > acessado em junho
de 2014
AMSTEL, Frederick van. Em busca de uma
metodologia projetual de design de interao materialista-dialtica. disponvel em <
http://www.usabilidoido.com.br/arquivos/design_interacao_materialista_dialetico.pdf >
acessado em abril de 2014.
BONSIEPE, G. Teora y prctica del diseo
industrial. Barcelona: Gustavo Gili, 1978.
CABREIRA, Arthur Theil. Pensando interfaces naturais baseadas na interao gestual:
contribuies no campo do design de interao humano-computador. Pelotas: 2013.
Monografia (Bacharelado em Design Digital)
Universidade Federal de Pelotas, 20113.
FRASCARA, Jorge. El diseo de comunicacin. Buenos Aires: Infinito, 2006.

FROST, Brad. 2012. Responsive Design
Patterns. In The Mobile Book. Germany,
Freiburg: Smashing Media GmbH. pp.
129-174.
GARRETT, James. The Elements of User
Experience: User-Centered Design for the
web. New Riders, 2003.
JOHNSON, Steven. Cultura da Interface . Rio
de Janeiro: Jorge Zahar, 2001.
KARDYS, Dennis. 2012. Hands-On Design
For Mobile. In The Mobile Book. Germany,
Freiburg: Smashing Media GmbH. pp.
225-288.
KOCH, Peter-Paul. 2012. Whats Going On
in Mobile?. In The Mobile Book. Germany,
Freiburg: Smashing Media GmbH. pp. 9-54.
Pelotas, UFPel, 2013. 93 p.

MENLO PARK, Calif., April 23, 2014 /
PRNewswire/ -- Facebook, Inc. (NASDAQ:
FB) today reported financial results for the
quarter ended March 31, 2014. Disponvel
em: < http://goo.gl/Bh1UEV> Acesso em: 6
de maio de 2014.
MLLING, Tobias Tessmann. Design experiencial: da teoria a prxis: recomendaes
para o projeto de hipermdias experienciais.
Florianpolis: 2010. Projeto de Dissertao
(Mestrado em Design e Expresso Grfica)
Programa de Ps-Graduao em Design e
Expresso Grfica, UFSC, 2010.
MUNARI, Bruno. Das coisas nascem coisas.
2 edio. So Paulo: Editora Martins Fontes,
2002.
NEGROPONTE, Nicholas. A vida digital. So
Paulo: Companhia das Letras, 1995.
CLARK, Josh. 2012. Designing For Touch.

In The Mobile Book. Germany, Freiburg:
Smashing Media GmbH. pp. 289-334.
LAKATOS, E. M.; MARCONI, M. Fundamentos

de Metodologia Cientfica. So Paulo: Atlas,
2010.
RIEGER, Stephanie. 2012. The Future Of

Mobile. In The Mobile Book. Germany,
Freiburg: Smashing Media GmbH. pp. 55-90.
COELHO, Luiz Antonio L. (org.). Conceitoschave em design. Rio de Janeiro: Ed. PUCRio: Novas Idias, 2008.
LEMOS, Andr. Cibercultura, tecnologia e

vida social na cultura contempornea. Porto
Alegre: Sulina, 2004.
CYBIS, Walter; BETIOL, Adriana Holtz;

FAUST, Richard. Ergonomia e usabilidade:
conhecimentos, mtodos e aplicaes. 2
edio. So Paulo: Novatec Editora, 2010.
LOPES, Cristiano Oliveira. Native apps e web

apps: compreendendo suas especificidades
de projeto para mobile-commerce. Pelotas:
2013. Monografia do Curso de Bacharelado
em Design Digital - Universidade Federal de
SANTOS, Mallu Poggetti dos. MOTION

DESIGN AND INTERACTION: PROJECT
TRANSITIONS FOR MOBILE APPLICATIONS.
Pelotas: 2014. Monograph (Bachelor in
Digital Design) Federal University of
Pelotas, 2014. 140p.
TIDWELL, Jenifer. Designing interfaces.
OReilly Media, Inc. 2 edio. Canad: Mary
Treleser, 2010.
WROBLEWSKI, Luke. Mobile first. 2007.

disponvel em <http://static.lukew.com/
MobileFirst_LukeW.pdf> Acesso em 3 de
abril de 2014.

TCC Designmob Manueladoerr

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

TCC Designmob Manueladoerr

Caricato da

Copyright:

Formati disponibili

Manuela Meurer Doerr

DesignMob: Proposta Metodolgica para Criao de Interfaces

Monografia apresentada ao curso de Bacharelado em Design

Ao professor e orientador, Tobias, por todos

Ao meu pai, Lus Fernando, por ser uma

Ao professor Guilherme, por estar presente

minha irm, Lusa, que acredita no meu

professora Gabriela, por aceitar fazer parte

Ao meu namorado, Douglas, por ser meu

Ao Francisco Zanetti, Isabela Rodrigues,

minha turma do curso de Direito, por me

O presente trabalho tem como objetivo identificar as caractersticas e mtodos referentes

Key-words: Mobile devices, Project Metodology, Interface.

Erik Ford. Fonte: http://me-

Tres Colunas. Fonte: http://

List Apart. Fonte: http://

Twitter. Fonte: www.twitter.

Melissa WakeUp. Fonte:

Voice sem menu. Fonte:

Nanoc. Fonte: http://me-

Voice com menu. Fonte:

Chrome. Fonte: Google

Bradesco. Fonte: Google

Paleta de cores. Fonte: Da

2| Caractersticas projetuais de aplicativos mveis........................................................... 35

3| Designmob: adaptao de uma metodologia para o design de aplicativos................. 49

4| Interface do infogrfico DesignMob............................................................................... 63

Referncias bibliogrficas ................................................................................................... 76

Este apenas um exemplo de uma rea onde

A palavra mobile, neste

Os designers, como profissionais atrelados

trabalho, estudo ou lazer e a autora desta

Como adaptar uma metodologia de projeto

A presente pesquisa tem carter qualitativo,

Para definir e explicar as metodologias de tais

didtica e prtica, sem que seja necessria

Descrio dos captulos

No Captulo 3, so apresentadas as entrevistas e os questionrios realizados, a fim de

No Captulo 4 apresentado o processo

Na introduo esto apresentados os objetivos do trabalho bem como a justificativa e a

1| Metodologia e aplicativos mveis

1.1 Mtodo, sistematizao e

1| METODOLOGIA E APLICATIVOS MVEIS | 21

metodologia ajuda a sistematizar o trabalho.

- Definio do Problema: Voltamos receita, como exemplo. Eis o problema: fazer

Tambm deve-se definir se ser um bolo

Depois da explicitao dos conceitos bsicos de metodologia, importa aplicar esse

Bruno Munari (2002) autor do livro Das

Seguindo o exemplo, decidimos fazer um

Este o momento de pesquisar os modelos

A Figura 1 mostra o esquema ilustrado no livro de Munari, explicando a ordem de cada

- Anlise dos dados: Todos os dados e

Figura 1. Esquema metodolgico. Fonte: MUNARI,

- Criatividade: Ser precisamente a criatividade que substituir a idia intuitiva, a qual

de resolver um problema. (MUNARI, 2002,

Nesta fase do bolo de chocolate quando se

Em meio a esses avanos tecnolgicos o

1| METODOLOGIA E APLICATIVOS MVEIS | 23

aprendizado no mundo digital, e para isso as

possivel perceber bastante diferena em relao a do Munari, que a divide em 12 etapas.

No prximo tpico, apresentada a metodologia de James Garrett (2003), um autor

1.2 A metodologia de James

Quando entramos em um site, o que vemos