DesignMob: Proposta Metodológica para Criação de Interfaces Digitais para Dispositivos Móveis

Transcrição

1

2 Manuela Meurer Doerr DesignMob: Proposta Metodológica para Criação de Interfaces Digitais para Dispositivos Móveis Monografia apresentada ao curso de Bacharelado em Design Digital da Universidade Federal de Pelotas, como requisito parcial para conclusão do mesmo, sob orientação do Prof. Tobias Mülling. Pelotas, 2014.

3 Orientador: Tobias Mülling Banca examinadora: Guilherme da Rosa Gabriela Zago

4 Agradecimentos Primeiramente a Deus, por ser essencial em minha vida. À minha mãe, Janice, por ser uma pessoa maravilhosa, por admirar o meu trabalho e por estar sempre disposta a me ajudar. Ao meu pai, Luís Fernando, por ser uma pessoa extraordinária, por sempre estimular minha criatividade e por acreditar no meu potencial. À minha irmã, Luísa, que acredita no meu trabalho e me incentiva todos os dias a seguir nessa profissão. Ao meu namorado, Douglas, por ser meu porto seguro nos momentos que precisei e por estar presente ao longo de todos esses anos comigo. À minha turma do curso de Direito, por me ajudarem nas dificuldades do curso e por tornarem minhas noites mais divertidas. Aos marofas - Jéssica, Bibiana, Lucas, Eduardo, Ceci e especialmente ao Fernando - pelo companheirismo e amizade durante a graduação. Sem vocês não teria sido tão bom. Ao professor e orientador, Tobias, por todos os ensinamentos durante o curso, pelo empenho e motivação. Por acreditar no meu trabalho e me incentivar a crescer sempre. 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 extraordinária a ponto de me incentivar a realizar a presente pesquisa. À professora Gabriela, por aceitar fazer parte dessa pesquisa e por contribuir com referenciais teóricos. Ao Francisco Zanetti, Isabela Rodrigues, Luciana Gerhard, Leo Xavier e Jordana Mascarenhas por disponibilizarem seu tempo com muita disposição e contribuirem para esta pesquisa. À empresa Pingg pelo seu apoio, disponibilidade de tempo e dedicação para esta pesquisa. A todos que de alguma forma contribuiram com a minha pesquisa, assim como aos que compreenderam minha ausência durante esses meses de pesquisa. Muito obrigada, sem vocês nada disso seria possível.

5 DOERR, Manuela Meurer. DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE IN- TERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS. Pelotas: Monografia (Bacharelado em Design Digital) - Universidade Federal de Pelotas, Páginas: 78. DOERR, Manuela Meurer. DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE IN- TERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS. Pelotas: Monografia (Bacharelado em Design Digital) - Universidade Federal de Pelotas, Páginas: 78. RESUMO O presente trabalho tem como objetivo identificar as características e métodos referentes a projetos de interfaces digitais para dispositivos móveis a fim de adaptar a metodologia projetual em design de James Jesse Garrett a uma metodologia para a criação de interfaces digitais para dispositivos móveis, a DesignMob. Para realizar tal adaptação, é efetuada uma revisão bibliográfica acerca de conceitos teóricos relacionados ao design aplicado a mobile bem como entrevistas com designers especialistas no mercado de trabalho, a fim de relacionar seu trabalho prático com as teorias estudadas e assim analisar os dados obtidos e construir a adaptação metodológica baseada na academia e no mercado de trabalho. Como resultado é construído um projeto de infográfico interativo que apresenta a metodologia de maneira sistemática e didática a fim de disseminar o conteúdo da pesquisa. ABSTRACT 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. Palavras chave: Dispositivos Móveis, Metodologia de Projeto, Interface. Key-words: Mobile devices, Project Metodology, Interface.

6 Lista de Figuras Figura 1. Esquema metodológico. Fonte: MUNARI, Bruno, 2002, p.55. Adaptação: da autora. Figura 2. (Garrett, 2003) Figura 3. (Garrett, 2003) Diagrama Metodológico Diagrama da Experiência Figura 4. Fluxograma (Garrett 2003) Fonte: Adaptação: a autora. Figura 5. Aplicativo Easy Taxi. Fonte: Google Play Figura 6. Aplicativo do facebook como Native App e Web App. Fontes: m.facebook.com; App Store, Google Play. Adaptação: da autora. Figura 7. Mobile First. Fonte: -content/uploads/2013/02/mobile-firt.jpg Figura 8. Tamanho de tela desktop x smartphone. Fonte: Da autora (2014). Figura 9. Aplicativo Instagram. Fonte: Google Play. Adaptação: da autora. Figura 10. Site da South Weast. Fonte: Adaptação: da autora. Figura 11. Projeto Google Glass. Fonte: Figura 12. Usando o Celular com o polegar. Fonte: Figura 13. Aplicativo Path. Fonte: Google Play. Adaptação: da autora (2014). Figura 14. Nanoc. Fonte: Figura 15. Erik Ford. Fonte: Figura 16. Tres Colunas. Fonte: mediaqueri.es/ Figura 17. List Apart. Fonte: mediaqueri.es/ Figura 18. Twitter. Fonte: com Figura 19. Melissa WakeUp. Fonte: Google Play Figura 20. Voice sem menu. Fonte: App Store Figura 24. RunKeeper. Fonte: www. mobile-patterns.com Figura 21. Voice com menu. Fonte: App Store Figura 25. Chrome. Fonte: Google Play Figura 22. Lista de ítens. Fonte: www. mobile-patterns.com Figura 26. CandyCrush. Fonte: Google Play Figura 23. Twitter com rolagem infinita. Fonte: Figura 27. Bradesco. Fonte: Google Play Figura 28. Sistemas de navegação. Fonte: Adaptação: da autora. Figura 29. Tabela de densidade. Fonte: (2014) Adaptação: da autora. Figura 30. Aplicativo Gogobot. Fonte: Adaptação: da autora. Figura 31. Gestos. Fonte: static.lukew.com/touchgesturecards.pdf Adaptação: da autora. Figura 32. Transições. Figura 33. Processo da empresa do profissional E. Fonte: Da autora (2014) Figura 34. Processo da empresa do profissional D. Fonte: Da autora (2014) Figura 35. Processo da empresa dos profissionais B e C. Fonte: Da autora (2014) Figura 36. Estrutura 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) Figura 40. autora (2014) Paleta de cores. Fonte: Da DesignMob Fonte: Da Figura 41. Telas DesignMob Fonte: Da autora (2014) Figura 42. Telas internas DesignMob Fonte: Da autora (2014) Lista de Quadros: Quadro 1 Native App X Web App Quadro 2. Entrevistados. Fonte: Da autora (2014) Quadro 3. Perguntas Fonte: Da autora (2014

7 Sumário Introdução Metodologia e aplicativos móveis Método, sistematização e metodologia A metodologia de James Jesse Garrett Metodologia materialista dialética Compreendendo a mobilidade Apps e WebApps Mobile First Características projetuais de aplicativos móveis Desafios do Design Mobile Ergonomia e usabilidade Padrões de estrutura Arquitetura de informação e navegação Densidade Gestos Transições Designmob: adaptação de uma metodologia para o design de aplicativos DesignMob As entrevistas As respostas em discussão Considerações Proposta da DesignMob Pré projeto Estratégia Escopo Estrutura Superfície Desenvolvimento Publicação Considerações sobre a DesignMob Interface do infográfico DesignMob Identificação da proposta Metodologia Escopo, Estrutura e Esqueleto Superfície Considerações finais Recomendações para trabalhos futuros Referências bibliográficas... 76

8 Introdução

9 16 17 Introdução Questão de pesquisa Metodologia 1 Disponível em: < goo.gl/yeo1eu> Acesso em: 19 de maio de A palavra mobile, neste trabalho, estará diretamente ligada à tecnologia dos smartphones e tablets, e está tão inserida no contexto da pesquisa a ponto da autora não achar necessária a sua utilização em itálico. Na atualidade, a tecnologia está cada vez mais próxima do homem, inserindo-se no seu dia-a-dia de maneira integrada. Ao acordar, já interagimos com a tecnologia através do despertador no celular, ou mesmo apenas para verificar o horário; ao longo do dia, interagimos com o computador, a televisão, aparelhos de som e geladeiras que possuem interfaces até algumas máquinas agrícolas com interfaces digitais. A tecnologia e a internet estão cada vez mais próxima de todos, incluindo diferentes classes sociais, faixas etárias e diferentes países. Veja os dados de transações bancárias no Brasil, feitos através da internet em 2013, segundo o site Wi2be (2014) 1 : No ano passado, foram 17,146 bilhões de transações realizadas, com crescimento de 23,1% ante Com isso, a internet representou 39,5% do total das operações. 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. Os designers, como profissionais atrelados à tecnologia, principalmente os designers de interfaces digitais, estão 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 bancárias através da internet, sem sequer precisar sair de casa, ou até mesmo usando o próprio celular. Os smartphones estão presentes em boa parte do dia das pessoas, seja para o trabalho, estudo ou lazer e a autora desta pesquisa sempre foi curiosa em relação a essa tecnologia específica, a área do mobile 2 onde os smartphones vêm mudando a vida das novas gerações. Além da curiosidade em relação ao mobile, a autora sempre se interessou por metodologia, por otimizar seus processos de trabalho, desde as questões pessoais, até as acadêmicas e de trabalho. Desde o início da graduação vários 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 projeção de projetos para smartphones. Percebendo a realidade do curso, onde vários trabalhos de alunos (Mallu, Arthur, Cristiano, Jéssica) propõem práticas focadas em dispositivos móveis, usando a metodologia de Garrett, surgiu o tema do presente trabalho: metodologia de projeto aplicada a mobile. Em uma pesquisa exploratória 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 prática da pesquisa será criado um projeto de infográfico 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 acadêmica, como metodologia teórico-prática para estudantes de design e para profissionais atuantes no mercado de trabalho. Como adaptar uma metodologia de projeto de interfaces digitais para aplicação em projetos para dispositivos móveis (smartphones e tablets)? Objetivo geral Adaptar a metodologia projetual em design de James Jesse Garrett para uma metodologia para a criação de interfaces digitais para dispositivos móveis, a DesignMob. Objetivos específicos - Compreender diferentes metodologias, seja com foco em projetos gráficos e/ou digitais. - Entender a dinâmica e as características da mobilidade, visto que possuem influência no projeto de interfaces. - Identificar métodos e técnicas utilizadas no projeto de interfaces digitais para dispositivos móveis. - Verificar junto a profissionais do mercado como ocorre o projeto desse tipo de interface. - Adaptar uma metodologia de projetos de interfaces digitais para sua utilização em projetos aplicados a dispositivos móveis. - Projetar um infográfico interativo, com o intuito de apresentar a metodologia proposta. A presente pesquisa tem caráter qualitativo, visto que apenas algumas metodologias foram selecionadas para servir como premissa para a adaptação metodológica. Essa escolha se deu a partir dos principais autores utilizados pelos professores durante a graduação. Para definir e explicar as metodologias de tais autores, foi feita uma revisão bibliográfica. Além da revisão bibliográfica sobre os autores de metodologia, também foi feita uma revisão bibliográfica a respeito das caracteristicas atreladas a projetos de interfaces digitais para entender a dinâmica da mobilidade. A partir da exposição dos principais conceitos teóricos pesquisados, é feito um questionário e uma entrevista com profissionais do mercado de trabalho a respeito da prática profissional, visando fazer uma análise das entrevistas e dos questionários em relação aos conceitos teóricos. O questionário 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 questões estavam previamente estabelecidas, porém outras foram sendo criadas de acordo com o diálogo. Diante da revisão bibliográfica teórica e das entrevistas em relação à prática projetual é possivel traçar adaptações à metodologia projetual de James Garrett com o intuito de focar nos projetos de dispositivos móveis. Para facilitar a disseminação da adaptação da metodologia proposta, a DesignMob, é criado um projeto de infográfico interativo que explica a metodologia de maneira

10 18 19 didática e prática, sem que seja necessária a leitura de textos auxiliares para o entendimento da DesignMob. Descrição dos capítulos A pesquisa está dividida em quatro capítulos com o objetivo de facilitar o entendimento e a organização das ideias de maneira ordenada. No Capítulo 3, são apresentadas as entrevistas e os questionários realizados, a fim de discutir e analisar suas respostas comparando-as com os elementos teóricos estudados para que então haja uma síntese e, finalmente a adaptação da metodologia criando a DesignMob. No Capítulo 4 é apresentado o processo de criação do projeto do infográfico interativo realizado para ilustrar a DesignMob de forma didática, dinâmica e interativa. Na introdução estão apresentados os objetivos do trabalho bem como a justificativa e a relevância da pesquisa, além da metodologia de pesquisa realizada e a presente descrição de capítulos. No Capítulo 1, são apresentados os conceitos de metodologia, de método, bem como os autores utilizados como base teórica do trabalho em relação a metodologia de projeto em design. São eles: Bruno Munari (2002) e James Jesse Garrett (2003). O capítulo segue explicando conceitos de dialética, mobilidade e então são apresentados alguns conceitos específicos do mobile, tais como as modalidades de Apps e WebApps e o modelo de trabalho apresentado por Lucke Wroblewiski (2012) chamado Mobile First. 1 Metodologia e aplicativos móveis No Capítulo 2, a pesquisa começa a focar ainda mais nos aplicativos móveis e suas características projetuais. Inicia explicando os desafios enfrentados pelo designer quando projeta para mobile, segue explicando sobre ergonomia, usabilidade e sua fundamental importância em um projeto mobile, alguns padrões de estrutura existentes criados por designers ou mesmo fornecidos pelo sistema. Apresenta conceitos e aplicações de arquitetura de informação e navegação, seguido de conceitos de densidade, gestos e transições no mobile.

11 20 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 1 METODOLOGIA E APLICATIVOS MÓVEIS Método, sistematização e metodologia Para iniciar um estudo onde o foco é metodologia, importa explicar o que ela é e para que serve. As metodologias estão presentes no cotidiano das pessoas, mesmo que às vezes elas nem percebam isso. Metodologia tem a ver com caminho programado, ordenação, projeto. Luiz Antonio L. Coelho (2008) conceitua metodologia como um conjunto de métodos utilizados em determinado trabalho. Além disso é a teoria que estuda a maneira de se desenvolver trabalhos. Um exemplo simples onde usamos metodologia é na hora de cozinhar. Mesmo se não utilizamos um livro de receitas, existe uma série 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 método, e o conjunto deles formam uma metodologia. É claro que essa não é exatamente a mesma que uma metodologia acadêmica, pois a segunda precisa ser testada em diferentes casos e provar ser eficaz, Mas as duas são igualmente importantes e, inclusive, durante o trabalho, serão relacionadas pesquisas acadêmicas com outras pesquisas visando obter adaptações. Portanto dentro da metodologia existem métodos, e o que são eles? A palavra método está relacionada com técnica, detalhamento, abordagem, processo. Coelho diz: De fato, o processo seria um método em movimento, já a técnica, seria como que o método cristalizado[...] (2008, p.252) Cada um desses métodos dentro da metodologia vai criando um caminho a seguir, e isso acontece de forma sistêmica, ou seja, a metodologia ajuda a sistematizar o trabalho. Coelho diz que sistematização é: 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 sistematização 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) Depois da explicitação dos conceitos básicos de metodologia, importa aplicar esse conhecimento no design. Para começar esse estudo existe um teórico de metodologia do design que servirá de início, isso porque as metodologias no design amadurecem a cada dia, e vão se tornando mais específicas para cada área do design, como, por exemplo, design de produto, design gráfico e o design digital, que é o foco deste estudo. Bruno Munari (2002) é autor do livro Das coisas nascem as coisas, escrito em Em seu livro detalha a sua metodologia em design baseada em resolver um problema, ou uma necessidade. Munari inicia sua metodologia com dois passos principais: Problema e Solução. Entre essas duas etapas ele cria uma série de passos (métodos) para se chegar ao resultado da melhor forma possível. A Figura 1 mostra o esquema ilustrado no livro de Munari, explicando a ordem de cada parte organizada nesse sistema metodológico criado por ele. Vamos analisar cada um desses passos rapidamente: - Problema: O cliente do designer é a indústria (2002, p. 32) diz Munari, e ele explica que o desinger não deve ir a procura de uma ideia que resolva o problema rapidamente e sim deve ir por etapas. Figura 1. Esquema metodológico. Fonte: MUNARI, Bruno, 2002, p.55. Adaptação: da autora. - Definição do Problema: Voltamos à receita, como exemplo. Eis o problema: fazer um bolo de chocolate. Nesse caso, a definição do problema será decidir se será um bolo de porção única, ou se será feito um bolo grande em uma forma redonda ou retangular, se terá recheio, cobertura, etc. Também deve-se definir se será um bolo de aniversário, ou um bolo para vender, se será um bolo experimental, se tem um público específico que vai comer, entre outras definições. - Componentes do problema: [...] Uma vez resolvidos os pequenos problemas [...], recompõe-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.) Seguindo o exemplo, decidimos fazer um bolo com recheio, grande e para crianças. - Coleta de dados: É claro que, antes de pensar em qualquer possível solução, é melhor verificar se alguém já não pensou nisso (MUNARI, 2002, p.40). 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. - Análise dos dados: Todos os dados e referências coletadas devem ser analisados, a fim de encontrar possíveis falhas e aprender a encontrar novas soluções. - Criatividade: Será precisamente a criatividade que substituirá a idéia intuitiva, a qual está relacionada ao modo artístico-romântico

12 22 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 1 METODOLOGIA E APLICATIVOS MÓVEIS 23 3 Neste trabalho a palavra desktop está diretamente relacionada com computadores não-portáteis. 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 disponíveis para a elaboração do projeto final. Essa etapa é de extrema importância, pois de nada vale um ótimo projeto quando impossível fazê-lo. No caso do bolo de chocolate, é a hora de pesquisar os ingredientes disponíveis e também a tecnologia. Deve-se verificar o forno disponível, batedeiras, fogão e outros meios necessários para fazer o bolo. - Experimentação: É o momento onde o projetista poderá experimentar seus materiais e suas técnicas disponíveis. É muito importante para inovar, pois mesmo sabendo que certo processo é eficiente, é sempre bom tentar novos caminhos. Na criação do bolo, a experimentação é fundamental, visto que existe um mundo de possibilidades de ingredientes e maneiras de assar o bolo. - Modelo: A partir das experimentações é gerada uma amostra, um modelo concluído que ainda poder resolver subproblemas que ajudam na solução global. - Verificação: Nessa etapa o projeto será submetido a um tipo de teste, será apresentado a usuários, para assim ainda resolver algum possível problema. Nesta fase do bolo de chocolate é quando se oferece para ser saboreado e, assim, ver o resultado e ainda alterar possíveis problemas. - Desenho de construção: Esse é o momento de desenhar e explicar todas as informações necessárias para que se possa confeccionar o projeto. É importante que tudo esteja muito claro nesta etapa, para que, quem for fazer o projeto posteriormente, o faça com a qualidade planejada. No caso do bolo, seria o momento ideal para escrever a receita completa contando os passos e as tomadas de decisões necessárias 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 não obriga o designer a utilizar todas, e, além disso, ela não especifica os métodos utilizados em cada etapa, Por exemplo, na etapa de criatividade não é proposto um processo criativo específico. É importante ressaltar que essa metodologia foi publicada em 1998, tempo onde o design digital ainda não estava consolidado como está hoje, e onde o digital era focado no desktop 3. Houve uma grande mudança cultural quando o meio digital foi inserido na vida das pessoas. O livro reinou como o meio de comunicação de massa preferido por vários séculos; os jornais tiveram cerca de 200 anos para inovar; até o cinema deu as cartas durante 30 anos antes de ser rapidamente sucedido pelo rádio, depois pela televisão, depois pelo computador pessoal. A cada inovação, o hiato que mantinha o passado à distância ficou menor, mais atenuado. (JHONSON, p15.) Em meio a esses avanços tecnológicos o design amadureceu significativamente, assim como as pessoas também tiveram esse aprendizado no mundo digital, e para isso as metodologias também tiveram que avançar cada vez mais. No próximo tópico, é 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 aproximação 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 comparação com a de Munari, a fim de mostrar certa evolução em relação à aplicação no design digital especificamente. A metodologia de Garrett é centrada no usuário, ou seja, foi feita pensando em como criar um projeto onde o usuário é o protagonista, pois é ele que vai usar e interagir com o sistema, site, aplicativo, ou o que for criado a partir da metodologia. Para sistematizar sua metodologia, Garrett construiu um diagrama que a divide em cinco principais etapas: Plano de Estratégia, Plano de Escopo, Plano de Estrutura, Plano de Esqueleto, Plano de Superfície. Apenas vendo essa imagem (Figura 2) já é possivel perceber bastante diferença em relação a do Munari, que a divide em 12 etapas. Quando entramos em um site, o que vemos é um conjunto de imagens e textos que passam informações e que geram interações, tem botões, videos, animações, etc. Esse é o plano de superfície, é o que o usuário final vê como resultado de todo um trabalho. Para chegar a esse resultado, existe um plano de esqueleto, que posiciona tais imagens e textos, que tem a funcionalidade dos botões, que otimiza a eficácia do site. No plano de estrutura, é um pouco mais abstrato. É o momento em que se pensa como colocar o conteúdo dividido em todas as Figura 2. Diagrama Metodológico (Garrett, 2003)

13 24 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 1 METODOLOGIA E APLICATIVOS MÓVEIS 25 Figura 3. Diagrama da Experiência (Garrett, 2003) páginas do site, onde se criam as categorias de informação. É nesse momento que se geram, por exemplo, os fluxogramas de navegação. No plano do escopo é onde se define as funcionalidades que o site deverá ter, e quais serão os conteúdos especificos necessários para o site. O plano da estratégia é ainda mais abstrato, é onde se pesquisam as necessidades do usuário para definir os objetivos do site e qual estratégia será adotada para melhor conquistar tais objetivos. A Figura 3 mostra como Garrett divide seus planos: Garrett (2003) tem como princípio a construção de baixo para cima do diagrama, fazendo com que cada etapa inicie após a outra. É claro que em vários momentos se deve voltar a etapa anterior e revisar problemas que surjam no caminho, mas em seguida retomar os passos de forma ordenada. Cada passo dessa metodologia possui papel fundamental nos projetos em design digital, e em vários momentos não é somente o designer quem coordena, pois a metodologia demanda a união de vários conhecimentos de diferentes áreas. Visto de forma geral como funciona a metodologia, agora seguem as especificações 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 informação (lado direito). - Plano de Estratégia: É o início do projeto, na verdade é o momento em que ainda não há projeto definido, e o objetivo desse plano é justamente criar uma estratégia para projetar. Divide-se em necessidades do usuário e objetivos do site. Muitos sites falham e o motivo não é falha na tecnologia utilizada ou mesmo a usabilidade. O problema começa antes mesmo de se escrever uma linha de código, porque não foram respondidas as principais questões: O que queremos passar com o site? E qual a necessidade do cliente no site? As respostas de tais perguntas irão mostrar os objetivos do site e as necessidades do usuário, e a partir delas se cria a Estratégia. Quanto mais claros e explícitos forem os objetivos e as necessidades, melhor será resolvido o projeto. Para descobrir as necessidades do usuário é importante segmentar o público alvo do produto, e até mesmo criar personas e usar grupos focais. Garrett (2003) comenta que até pesquisas antropológicas são importantes para entender a cultura e a sociedade em que o produto está inserido. Quando o projeto for redesign, recomenda- -se fazer testes com usuários no início do projeto, para que as melhorias sejam feitas baseadas em tais testes. Para finalizar essa etapa de forma organizada, é comum criar um documento onde todas as informações obtidas estejam escritas formalmente. Isso ajuda muito porque, em vários momentos posteriores a esta etapa, é preciso reler a estratégia. - Plano de Escopo: Divide-se em especificações funcionais e requisitos de conteúdo. O documento da estratégia criado anteriormente vai se transformando em escopo quando os objetivos vão se tornando mais palpáveis, ou seja, são identificadas as necessidades e transformadas em requerimentos específicos de conteúdo. E assim o escopo vai tomando forma, definindo a quantidade de cada requerimento específico, definindo possíveis conteúdos estáticos ou dinâmicos, propondo interações e definindo as tecnologias que serão utilizadas. Esta é uma etapa de muita pesquisa, e é através dela que se organiza e concretiza cada vez mais o projeto de forma clara e objetiva. É importante pensar as possibilidades de interações e tecnologias a serem utilizadas nesse momento em que o projeto ainda é hipotético, pois assim existe a chance de mudar de idéia enquanto se discute a viabilidade das partes do projeto. Nessa hora importa explorar as opções que a plataforma, para a qual o projeto será feito, tiver. Por exemplo, se for um tablet, pode-se explorar o GPS, a câmera, também 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 básico sobre tecnologia e também que os profissionais da tecnologia estejam presentes nesses momentos de decisões, antes de iniciar a construção propriamente dita do projeto. - Plano de Estrutura: Divide-se em design de interação e arquitetura de informação. Definidas as prioridades na etapa anterior, é chegada a hora de esqumatizar o que será incluído e de que forma será incluído cada conteúdo no produto final. Essas decisões são tomadas pelo designer de interação e pelo arquiteto de informação. Do ponto de vista da interface, o designer de interação vai determinar a experiência do usuário, e do ponto de vista do conteúdo o arquiteto da informação irá organizá-lo, dividi-lo e categorizá-lo de acordo com o que for relevante. Para iniciar a organização do conteúdo, a metodologia propõe que se faça um fluxograma para orientar a hierarquia e ordem do conteúdo. Esse fluxo pode se dar de diferentes formas, Garrett (2003, p. 93) propõe algumas categorias: hierárquica, matricial, orgânica e sequencial. Essa categorização de conteúdo não é simples de construir, é necessário muito trabalho para dividir o conteúdo em páginas diferentes com hierarquias diferentes. Garrett (2003) propõe um sistema de setas que

14 26 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 1 METODOLOGIA E APLICATIVOS MÓVEIS 27 Figura 4. Fluxograma (Garrett 2003) Fonte: Adaptação: a autora. ajuda na sistematização da navegação do site através do sitemap, e ele disponibiliza em português no link: visvocab/files/metafilter_ia.pdf Finalizado o sitemap, é possível perceber visualmente a estrutura do sistema a ser construído, e só, a partir de então, o design visual começa a aparecer. Veja um exemplo de sitemap construído por Garret (2003): - Plano de Esqueleto: Garrett (2003, p.108) fala que esta etapa torna o intangível em uma estrutura concreta através do design da informação, dividindo-se em design de interface e design de navegação. 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 conteúdos divididos pelo sitemap, precisam ganhar forma, precisam interagir através de botões, imagens, campos de texto, entre outras tantas possibilidades. Uma interface de sucesso é aquela em que o usuário percebe de forma imediata as coisas mais importantes (GARRET, 2003, p.114). Garrett (2003) ressalta a importância dos padrões de design. Não quer dizer que se deve usá-los sempre, mas em muitos casos eles podem ajudar a tornar uma ação do usuário mais clara, sem que ele precise aprender a lidar com cada sistema com que se depara. Os checkboxes, radio buttons, text field são exemplos de padrões geralmente seguidos pelos designers. O design de navegação deve levar em consideração três objetivos simultaneamente: - Quando o usuário estiver em uma página específica, deve poder ir para outros pontos do site através de uma navegação consistente proporcionada pelo site; - Os elementos de navegação devem relacionar-se entre si, devem demonstrar a ordem de hierarquia, quando existir e se posicionar de forma categorizada quando houver categorias. - Os elementos da navegação devem relacionar-se com o conteúdo presente nas páginas que o usuário estiver visitando. Dentre os vários sistemas de navegação o mais usual é o global, embora existam outros tais como: navegação local, suplementar, contextual e a redundante. O design da informação contempla a organização do conteúdo dentro de cada página, e isso influencia muito a experiência do usuário. Garrett (2003, p.124) exemplifica isso quando fala da ordem das informações: Estado, profissão, telefone, endereço, nome, etc. Esta ordem parece estranha, pois estamos acostumados com uma organização diferente, por exemplo: nome, profissão, telefone, endereço. Esse é um exemplo simples onde a organização da informação realmente importa, e em um projeto de um site inteiro, ou aplicativo, isso se torna complexo de fazer e influencia diretamente a experiência do usuário. Para organizar essas informações de forma clara, existe um termo chamado wayfinding, que ajuda na localização global das informações dentro do site, ajuda a entender onde o usuário está e para onde ele pode ir, isso está diretamente ligado com o design de navegação. Para deixar o projeto ainda mais concreto existe a etapa dos wireframes, que são a construção de um layout visual que utiliza todas as etapas anteriores como base da sua construção (sitemap, design de navegação, estratégia). Geralmente é feito de forma simplificada nas cores cinza e branco, com uma tipografia básica, pois nesse momento o design visual ainda não é importante, o que importa é organizar as informações hierarquicamente definidas anteriormente de forma visualmente perceptível pelo usuário. - Plano de Superfície: Depois de toda a pesquisa, definição de estratégia, 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 usuário interage com a interface, ele recebe as informações através 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 tátil, o visual e o auditivo, que são os mais aplicáveis ao design digital. Existe uma ferramenta chamada eyetracking que verifica onde o olho do usuário olha primeiro, e o trajeto que o olho faz. Essa ferramenta serve para ver se o usuário 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 organização, equilíbrio e leveza das informações. - Viagem guiada, que está relacionada às possibilidades de tarefas a realizar. Para desenhar as telas vários quesitos de design devem ser levados em consideração, e Garrett (2003) ressalta alguns deles: Contraste, Grid, Consistência, Cor e Tipografia. A partir dos planos/passos explicados anteriormente, é possivel a criação de um bom projeto de design. Tanto Munari quanto Garret expressam passos que guiam o designer na criação do projeto, mas podemos perceber que a metodologia de Munari é um pouco mais generalista, isto é, abrange a criação de design gráfico, de produto e digital; já a metodologia do Garrett enfatiza diretamente o design digital. Outra diferença é que a metodologia de Munari apresenta os passos sem indicar métodos específicos, já Garret pressupõe uma série de métodos focados na produção 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 é possível adicionar passos e métodos para otimizar projetos em design digital focados

15 28 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 1 METODOLOGIA E APLICATIVOS MÓVEIS 29 em mobile, que é o foco da pesquisa. Para entender um pouco mais sobre metodologia, principalmente uma baseada no processo colaborativo, iremos abordar brevemente a dialética. 1.3 Metodologia materialista dialética. Do início da web até hoje, grandes mudanças aconteceram, tanto que desde 2005 O`Reilly já fala da Web 2.0. Os papéis de designer e usuário eram mais definidos e distintos no início da web, hoje os designers também são usuários, e a questão da geração de conteúdo tem sido cada vez mais colaborativa, ou seja, o usuário não está apenas acessando informações, mas ele também está gerando informações. Esse diálogo, cada vez mais presente na web, é o que os gregos (Grécia Antiga) chamavam de dialética. Muitos teóricos como Kant, Marx, Hegel, Aristóteles debateram sobre a dialética, chegando a inúmeras conclusões distintas, mas todas partem da idéia do diálogo, do movimento. Hegel pregava que a contradição é 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 aintítese, e ainda sendo possível uma síntese, que também poderia ser contestada formando-se um circulo interminável. Mas Como aplicar essa teoria nesta pesquisa de design? Devemos encarar o design como um processo social coletivo, assumindo a contradição como força matriz da atividade projetual, permitindo encarar o processo de design como ele se apresenta na realidade: incontrolável, sujeito a desvios de percurso, paradoxal, enfim, humano (AMSTEL, 2006, p. 12). A experiência de cada usuário é ú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 próximo tópico. 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 não foi sempre assim; na verdade, faz muito pouco tempo que é assim, e isso acarretou mudanças significativas na cultura e na sociedade. Um exemplo simples que mudou uma ação cotidiana é o aplicativo Easy Taxi, que aparece na Figura 5: Figura 5. Aplicativo Easy Taxi. Fonte: Google Play Mudou o tempo em que nas grandes cidades as pessoas tinham o telefone de apenas um taxista de confiança, 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 idéia de confiança, o aplicativo Easy Taxi mostra os taxis mais próximos e você pode chamá-lo através do aplicativo, e além disso pode ver o perfil do taxista, inclusive com uma espécie de ranking que mostra o que os usuários falaram anteriormente do taxista. Assim, do primeiro computador lançado até os microchips utilizados hoje em dia existiu um grande avanço tencológico, e hoje as pessoas interagem com as interfaces sem perceber a complexidade que está por trás. Um outro exemplo é o caixa eletrônico, que de maneira muito fácil e prática o usuário saca dinheiro em qualquer horário do dia sem precisar ir até um banco. Para o usuário é muito simples, mas a tecnologia e a segurança projetadas para esse dispositivos são muito complexas. É o momento de falar de um termo muito usado ultimamente: Ubiquidade Computacional, introduzido por Mark Weiser, na década de 80: Weiser vislumbrava um futuro no qual tecnologias computacionais fariam parte do tecido da vida cotidiana, ressaltando que as tecnologias mais avançadas seriam aquelas que desaparecessem no pano de fundo do nosso entorno. (PINHEIRO; SPITZ, 2007) O papel do designer se amplia, pois ele não pode se prender apenas aos tradicionais projetos de cartazes, ou de sites para computador. Temos que estudar as práticas sociais e projetar a partir delas, isso não significa que os tradicionais projetos irão sumir, mas que muito mais coisas vão surgir e temos que estar sempre aprendendo para projetar para elas. A internet está em quase todos os lugares, principalmente nas grandes metrópoles, 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 questões de territorialização, desterritorialização e reterritorialização, e enfatiza a perda das fronteiras. Não é por acaso que ele diz isso, afinal a tecnologia aliada à mobilidade, permite a aproximação entre cidades, países e continentes, entre culturas e religiões. No mundo digital, as distâncias significam cada vez menos. (NEGROPONTE, 1995, p. 170). Então estamos vivendo a mobilidade, e o que fazemos com essa informação? É hora de estudar os dispositivos móveis e os aplicativos móveis para saber como projetar para eles. 1.5 Apps e WebApps Como falado no tópico anterior, cada vez mais os smartphones estão inseridos no cotidiano das pessoas, gerando uma demanda de trabalho para o designer projetar para essas plataformas. Não só smartphones, mas também os tablets estão inseridos nesse contexto, e antes de falar dos aplicativos destas plataformas é interessante falar um pouco sobre cada uma delas. Os smartphones são os telefones celulares inteligentes, ou seja, diferentemente dos celulares antigos (primeiros celulares) que apenas permitiam ligar e mandar SMS, estes

16 30 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 1 METODOLOGIA E APLICATIVOS MÓVEIS 31 posssuem um sistema operacional que permite a instalação de aplicativos e acesso à internet. Os tablets são um tipo de computador portátil, mas são pequenos, com espessura fina, possuem tela touchscreen e não possuem teclado e mouse, como os computadores. Permitem o acesso a internet, a instalação de aplicativos e alguns programas mais complexos que os smartphones. Tanto os smartphones como os tablets funcionam a partir de sistemas operacionais, e não existe um sistema padrão para todos, nem mesmo tamanhos de tela padrão, dificultando o trabalho do designer e requisitando a utilização de mais de uma tecnologia para que o aplicativo alcance todos os sistemas. Os sistemas mais utilizados pelos aparelhos são: - IOS, que é um sistema exclusivo dos aparelhos produzidos pela empresa Apple. São eles os Iphones e Ipads. - Android, utilizado principalmente pelos aparelhos da empresa Samsung, mas também é utilizado por outras empresas. Existem os mais variados modelos desse sistema. - Windows Phone, utilizado apenas pelos aparelhos da empresa Nokia. Diante desses diferentes sistemas utilizados pelos usuários, na hora de projetar os aplicativos é preciso entender que existem três tipos de aplicativos: Native Apps e WebApps e Aplicativos Híbridos.. Os Native Apps são aqueles aplicativos que o usuário acessa a partir da loja virtual do seu dispositivo (smartphone ou tablet), baixa (faz o download) e instala. Esses aplicativos necessitam uma codificação diferente para cada sistema operacional, visto que ele utiliza a linguagem nativa dos sistemas. Os WebApps são aqueles aplicativos acessados através do browser do dispositivo, não necessitam de download e não fazem instalação no celular. Esses aplicativos não necessitam uma codificação diferente para cada sistema, apenas sofrem pequenas variações de acordo com o browser e a resolução da tela. Os aplicativos híbridos são parcialmente Apps e parcialmente WebApps. Como os nativos, eles devem ser baixados através de um aplicativo de store e podem aproveitar todas as funcionalidades do dispositivo. Como web apps, eles podem ser baseados em HTML5 e exibidos através de um navegador embutido no aplicativo, tendo parte ou conteúdo total carregado da web. (AMBROS, 2013) Acompanhe ao lado (no Quadro 1) um comparativo mostrando o que cada um pode oferecer: No Quadro 1, vemos as diferenças projetuais, já na Figura 4 (também ao lado) podemos ver uma diferença aplicada. O aplicativo do Facebook tem a versão de Native App e Web App, e o usuário pode escolher como deseja usar. Isso exige um orçamento alto, por isso geralmente apenas grandes marcas possuem os dois tipos. Fazendo uma pequena análise diante do exemplo prático do Facebook, é possível perceber que os Natives Apps, por serem diferentes para cada sistema, conseguem ser mais coerentes com a navegação global do dispositivo, ou seja, eles mantêm alguns padrões de menus e de interação, deixando a interface mais consistente em relação ao Acesso a internet Compatibilidade com o dispositivo Conteúdo pesquisável Desenvolvimento Possibilidade de venda Distribuição Recursos do sistema Atualizações Divulgação do aplicativo Native Apps Web Apps Hybrid Apps Apenas para fazer o download, depois não é mais necessário. Criado para um sistema operacional específico. Apenas dentro do aplicativo, sem pesquisa através da web. É necessário o desenvolvimento de um aplicativo para cada sistema operacional. Permitida. Native App Android A distribuição do aplicativo se dá por meio de aprovação das stores (lojas), o que pode demandar tempo. Quando o usuário permitir pode usar os recursos disponíveis no dispositivo, tais como: câmera, GPS, acelerômetro, etc. O usuário atualiza. É disponibilizado nas lojas dos dispositivos. Web App Em geral necessita. Criado para ser utilizado em qualquer sistema operacional, pois é acessado através do browser. Busca padrão da web. É necessário criar apenas um desenvolvimento que irá funcionar em todos através dos browsers. Pode ter publicidade, mas não pode ser vendido. Não há restrição. Possui acesso limitado aos recursos do dispositivo. O servidor atualiza sem intervenção do usuário. Não estão disponíveis nas lojas dos dispositivos. Native App Ios Pode necessitar ou não. Criado para ser utilizado em qualquer sistema operacional, com apenas partes específicas que necessitam ser alteradas. Busca da web em geral. Utiliza-se o mesmo HTML para diferentes sistemas operacionais. Permitida. Distribuição por meio de aprovação nas stores ou por vezes é é acessado pelo browser não tendo restrição. Quando o usuário permitir pode usar os recursos disponíveis no dispositivo, tais como: câmera, GPS, acelerômetro, etc. O usuário atualiza. É disponibilizado nas lojas dos dispositivos. Quadro 1. Native App X Web App Figura 6. Aplicativo do facebook como Native App e Web App. Fontes: m.facebook.com; App Store, Google Play. Adaptação: da autora.

17 32 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 1 METODOLOGIA E APLICATIVOS MÓVEIS 33 dispositivo. Mas ao mesmo tempo, a existência de um WebApp também é muito prática, já que não precisa instalar. Quando o usuário não está conectado a uma rede wifi, por exemplo, e só tem a conexão 3G, o WebApp é mais viável, visto que não necessita baixar e instalar. A partir dessas comparações percebe-se que existem grandes diferenças entre os tipos de aplicativos, e então fica a pergunta: quando usar um ou outro? Ou até mesmo quando usar os dois? JT Mudge (2012) propõe algumas questões 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 câmera, acelerômetro)? - Qual o orçamento disponível para o projeto? - O aplicativo precisará estar conectado à internet? - Preciso atingir todos os dispositivos móveis? - Quais as linguagens de programação de que tenho conhecimento? - O quão importante é a velocidade e o desempenho? - Como este aplicativo será monetizado de maneira eficaz? Essas questões propostas por Mudge (2012) podem auxiliar, mas não são decisivas. Sempre é importante avaliar junto com uma equipe competente. E vale lembrar também que os produtos do design digital, diferente do gráfico, são produtos vivos, em constante atualização, por isso, em certas situações, 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 questão de iniciar com projetos desktop ou mobile tem sido debatida. Até pouco tempo os produtos eram lançados para desktop e então adaptados para mobile, mas hoje existem outras possibilidades, e o Mobile First é uma delas. 1.6 Mobile First Em uma tradução livre o conceito significa: primeiro o mobile. Mas como surgiu isso? Esse conceito surgiu dos números, das estatísticas, pois a quantidade de dispositivos móveis vem aumentando cada vez mais. Dentre as várias pesquisas vale citar a última do Facebook, a pesquisa parcial de 2014: Usuários ativos diários do Facebook aumentaram 21% até março em desktops. Usuários ativos diários do Facebook aumentaram 43% até março em dispositivos móveis. (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 móveis, e somente depois para desktop. Luke Wrowblesky (2011) explica que foi em 2006 que começou a demanda de projetos para mobile, e com o lançamento do Iphone em 2007 aumentou e a partir daí o mercado só cresceu. Este é um modelo de trabalho com um viés bem diferente do tradicional, que é projetar para desktop. Vários fatores influenciam na hora de projetar pensando primeiro em mobile: o tamanho da tela, a diferença da imersão, da interação, entre outros. Figura 7. Mobile First. Fonte: designinterativo.etc.br/wp-content/uploads/2013/02/ Mobile-Firt.jpg Quando projetamos para desktop, mesmo com as grandes diferenças de tamanho de tela, existe uma certa aproximação de padrão de tamanho que é 1024x768px. Pensando em mobile, a medida aproximada usada como padrão é 320x480px. A diferença de tamanho influencia muito na hora de projetar. Se começarmos pelo desktop e apenas o adaptá-lo para o dispositivo móvel, nem sempre a experiência do usuário será satisfatória. Veja na Figura 8 a diferença entre os tamanhos de tela. É por causa dessa diferença de tela e pelo aumento exorbitante do uso de tais dispositivos móveis que Wrowblesky (2011) propõe o Mobile First, e explica que é melhor partir do mobile para o desktop do que ao contrário. Vale ressaltar que além do Mobile First existe o conceito de Design Responsivo que também surge da necessidade de projetar para diferentes tamanhos de tela. Figura 8. Tamanho de tela desktop x smartphone. Fonte: Da autora (2014). Design responsivo consiste em projetar um site que se adapte a diferentes formatos de tela (incluindo adaptações de grid, quantidade de conteúdo, 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 não 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: não 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.

18 34 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 1 METODOLOGIA E APLICATIVOS MÓVEIS 35 foi feito primeiro para dispositivos móveis, ou seja, dentro dos conceitos do mobile first. Veja na Figura 10 o site mobile e o site desktop: O site foi criado baseado nas necessidades que o usuário mobile tem, e focado nessas necessidades para não colocar informações demais. No site desktop, há espaço para colocar informações adicionais, de segundo plano, mas no mobile não há. Nesse tipo de projeto, a pesquisa sobre as necessidades reais do usuário deve estar muito presente, pois ela fará total diferença no resultado do projeto, visto que no mobile não estarão todas as informações e opções como há no desktop. Figura 9. Aplicativo Instagram. Fonte: Google Play. Adaptação: da autora. O aplicativo é uma rede social de fotos, onde o usuário tira fotos, geralmente bem espontâneas sobre qualquer atividade do seu dia, aplica um filtro, cria as hashtags, coloca sua localização e compartilha com seus amigos. Durante muito tempo, o projeto esteve disponivel apenas para mobile, mas hoje em dia o usuário pode acessar através 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 disponível para Android, IOS e Windows Phone. Portanto Wrowblesky (2011) traz esse conceito de Mobile First que nasceu a partir de necessidades reais, de dados, do crescimento dos usuários na internet a partir de dispositivos móveis, e cada vez mais parece necessária uma metodologia aplicada a esses novos projetos, por isso a importância dessa pesquisa. No início do capítulo mostramos a importância da metodologia na otimização de processos dentro dos projetos de design, e como eles devem ir amadurecendo de acordo com as necessidades e tecnologias existentes. No próximo capítulo, vamos enfatizar as características projetuais dos dispositivos móveis, com o objetivo de entender cada vez mais essa realidade e aprender a projetar para ela. 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 então quando reprojetaram o site ele Figura 10. Site da South Weast. Fonte: www. southwest.com Adaptação: da autora.

19 2 Características projetuais de aplicativos móveis

20 38 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 2 CARACTERÍSTICAS PROJETUAIS DE APLICATIVOS MÓVEIS Desafios do Design Mobile Neste tópico 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 não param de avançar, os designers têm 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 afirmação não está ligada a questões do destino, mas sim de jornada, a qual estamos traçando a cada vez que usamos, projetamos e estudamos smartphones, tablets, entre outros dispositivos móveis. Rieger (2012) acredita que num futuro próximo estaremos todos conectados. Mas como assim, não estamos já conectados? Rieger vai além das conexões humano-computador, vai além do pensar da internet nas grandes cidades. Ela explica que cada vez o mundo está mais conectado, não só nas grandes cidades mas em quase tudo. Inclusive em áreas como agronomia e pecuária, a tecnologia e a mobilidade já estão presentes e estarão cada vez mais. Além disso, explica que, além de nós estarmos conectados aos dispositivos, estes dispositivos estão conectados com outros disposivos. Por exemplo, se um usuário quiser escutar uma música em seu computador, ele pode acessar a internet e comprar a música em uma loja virtual. Então fará o download e poderá escutá-la. Esta é uma ação muito comum no cotidiano das pessoas e, parece simples, mas veja esta grande conexão: usuário - computador - rede wifi - site da loja - conexão com o cartão de crédito - servidor da loja virtual disponibiliza a música - download. Pensando que cada vez mais os usuários realizam tarefas pelos dispositivos móveis, 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 também ao usuário. Tidwell (2011, p. 442) descreve alguns desafios que o designer encontra ao projetar para mobile que anteriormente não 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 essência, tirar as informações extras que puder, deixá-lo objetivo, apenas com as funções mais importantes da página. - Variações de tela: Além das telas serem pequenas, existe uma grande variedade de dispositivos móveis, e muitos deles com diferentes tamanhos de tela. Isso dificulta o trabalho do designer, visto que é difícil um layout funcionar bem em telas que variam de 128px até 600px de largura. Algumas soluções possíveis são fazer telas adaptáveis e até mesmo projetadas de maneira diferente para alguns tamanhos, e também o estudo do público alvo do projeto pode ajudar a diminuir esta variação. - Touch screens: A maioria dos dispositivos móveis oferecem a interação a partir do toque na tela. Essa interação oferece novas e diferentes possibilidades que o desktop. Embora tenha ótimos recursos, alguns cuidados devem ser tomados, tais como: tamanhos de botões e quantidade de rolagem da página. - Dificuldade de digitar textos: Ninguém gosta de escrever tocando na tela, então é importante diminuir ao máximo o imput de texto do usuário na experiência mobile. Em casos de formulários, é bom reduzi-los ao máximo e também ter a opção de autocompletar, pois isso otimiza a ação do usuário. - Desafios em relação 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 incidência do sol, na falta de iluminação, na falta de precisão do toque, na dificuldade de parar para ler grandes textos. - Atenção limitada: Pelo motivo de o mobile ser usado em diferentes lugares, o usuário acaba dividindo a atenção do mobile com outras atividades, além de às vezes estar conversando com outras pessoas, enquanto usa um aplicativo ou acessa um site. Riegel (2012, p. 72) também descreve sobre alguns desafios: - Novos dispositivos: Diante das novas tecnologias (veja a Figura 11) cada vez mais surgem diferentes dispositivos móveis além dos smartphones e dos tablets. Um exempo é o projeto do Google Glass que usa a tecnologia Heads-Up-Displays (HUD) que singifica a tecnologia através de telas transparentes. Mas por que o designer deve ficar atendo a estes novos dispositivos? Isso é muito importante porque cada dispositivo possui interações específicas diferentes, e os projetos devem, além de estarem de acordo com tais interações, usufruir ao máximo delas para proporcionar inovação e Figura 11. Projeto Google Glass. Fonte:

21 40 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 2 CARACTERÍSTICAS PROJETUAIS DE APLICATIVOS MÓVEIS 41 experiência satisfatória ao usuário. A questão das diferentes interações também deve ser observada pelo motivo de que o mesmo aplicativo pode não funcionar em diferentes dispositivos, então devem ser feitas adaptações pensadas estrategicamente. - Inseguranças: A autora (RIEGEL, 2012) traz a preocupação com a privacidade e segurança dos usuários. Até que ponto um usuário pode andar pelas ruas fotografando livremente e compartilhando imagens sem a permissão das outras pessoas? E se já é proibida a utilização dos smartphones durante a ação de dirigir, não seriam ainda mais perigosas as tecnologias transparentes (HUD)? Essas questões não têm 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 identificação por rádio frequência. É uma tecnologia que proporciona interação entre os dispositivos móveis e outros objetos que tenham a etiqueta RFID. - NFC: Vem do termo Near Field Communication que significa comunicação por proximidade. Essa tecnologia, presente em alguns smartphones, é utilizada de várias formas, tais como efetuar compras, interagir com dispositovos de carros, pagamentos e interação com cartazes e outros produtos não digitais. Pode funcionar de três formas: ativo/passivo onde ambos os dispositivos transmitem sinal, um objeto pode transmitir uma URL, por exemplo; Leitura e gravação é similar ao RFID, pode ser utilizado para descontar créditos em transportes por exemplo; peer-to-peer onde os dois dispositivos interagem transmitindo dados, um usuário 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 três principais tópicos que devem ser levados em consideração no momento em que colocamos a mão na massa : - Canvas: Acreditamos que existe um tamanho padrão de página, diz Kardys (2012, p. 228), mas que na verdade não existe. Essa idéia de página vem de um histórico processo de passagem do design gráfico para o digital, onde os próprios designers se apropriaram do termo página. Precisamos entender que as telas dos websites e aplicativos são como databases e não páginas, pois variam de tamanho, interagem e são vistas por milhares de usuários ao mesmo tempo. - Capacidade/Capability: Presumimos que os dispositivos móveis possuem as mesmas capacidades que os nossos possuem (meu smartphone), diz Kardys (2012). Então devemos perceber que diferentes dispositivos tem diferentes capacidades as quais devemos explorar, mas ao mesmo tempo devemos tentar estabelecer um meio termo para que vários dispositivos possam usufruir do mesmo aplicativo, principalmente em WebApps. - Contexto/Context: Certas vezes pensamos que sabemos o contexto específico onde os usuários poderão utilizar tal aplicativo, e definimos que essa é a necessidade. Mas isso não pode ser algo definitivo. Nunca saberemos todos os contextos onde os usuários utilizam seus dispositivos móveis, mas não quer dizer que não sabemos nada, apenas que não podemos prever tudo. Para ajudar a resolver tais questões, Kardys 2012, p. 231) sugere a constante observação dos usuários. Esses desafios, cuidados e possibilidades devem ser explorados pelo designer ao máximo, pois quanto mais os dispositivos oferecerem tecnologia, mais o designer deve se apropriar dela, e assim um incentiva ao outro e o usuário vai ter cada vez uma experiência mais inovadora e completa. Nos próximos tópicos iremos seguir explorando o mobile, para cada vez conhecê-lo mais. No seguinte tópico abordaremos conceitos de ergonomia e usabilidade nos dispositivos móveis. 2.2 Ergonomia e usabilidade Como já mencionado anteriormente, o contexto de uso dos dispositivos móveis é diferente do contexto dos desktops e, a partir dessas diferenças, devemos explorar conceitos de ergonomia e usabilidade de forma específica para melhorar a experiência do usuário. Como também já mencionado, o designer não projeta apenas páginas para aplicativos móveis. Joseph Clarck (2012, p. 290) explica que, quando entramos mo mundo do touch screen, não importa apenas como os pixels se parecem, mas como o usuário o sente quando toca. A partir disso, ele complementa que, quando projetamos para dispositivos móveis, entramos no mundo do design industrial. Clarck (2012) atenta para algumas questões práticas 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 percepção prática do usuário, o autor explica que podemos segurar o dispositivo móvel com apenas uma mão, e com esta mesmo utilizá-lo, ou utilizá-lo com a outra mão, ou ainda utilizar as duas mãos para interagir, e tal decisão vai depender do contexto do usuário. Utilizar o dispositivo com apenas uma mão é muito comum, pois liberta o usuário para utilizar a outra mão para realizar outra atividade, mas ao mesmo tempo o designer deve perceber que nesta situação o usuário utilizará seu polegar para interagir, por isso a regra do polegar. Veja na Figura 12 abaixo um exemplo: Para que esse usuário tenha uma experiência otimizada e ergonômica, sugere-se que se coloquem os principais botões de funcionamento do aplicativo na zona onde o polegar alcança. Essa regra do polegar não necessariamente se aplica a todos os aplicativos, por isso é sempre importante a constante pesquisa do contexto onde os usuários utilizam aplicativos semelhantes e seus dispositivos móveis em geral. Veja no exemplo a seguir (Figura 13) o aplicativo Path que coloca seus principais botões de navegação em tal zona: Figura 12. Usando o Celular com o polegar. Fonte: giox5w

22 42 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 2 CARACTERÍSTICAS PROJETUAIS DE APLICATIVOS MÓVEIS 43 Isso deve ser pensado para que o aplicativo funcione sem internet ou que de um retorno ao usuário sobre seu funcionamento nesta circunstância. Outro elemento importante é a estética, pois certamente existem muitos tradutores disponíveis, e a estética é um elemento atrativo importante. E por último Cybis ainda fala da questão de um processo off-line, que trata da associação do usuário às marcas, a questão da confiança e da credibilidade que o usuário pode ou não depositar no aplicativo em questão. Assim, percebemos a importância dos seguintes conceitos: utilidade, usabilidade, disponibilidade do sistema, estética e processo off-line. 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 padrão prevê a modulação a partir de um layout de três colunas. Em uma tela maior, aparecerá com três colunas e, à medida que diminuir a resolução, as colunas irão se reagrupar de acordo com o tamanho da tela, podendo ser de duas ou apenas uma coluna (Figura 15). - Layout Shifter: Esse padrão funciona para layouts mais complexos, onde o designer deve estabelecer que a partir de exatas mudanças de resolução o layout irá se alterar da maneira projetada, fazendo com que os módulos se reorganizem de maneira específica e não de forma orgânica. (Figura 16) - Tiny Tweaks: Esse padrão é o mais simples, funciona em layouts minimalistas onde há apenas uma coluna. Desta forma os elementos da coluna única irão apenas variar de tamanho de acordo com a resolução da tela. (Figura 17) Para explorar os conceitos de estética e usabilidade, no seguinte tópico explicaremos sobre os padrões de estrutura existentes atualmente para os dispositivos móveis. Figura 14. Nanoc. Fonte: Figura 13. Aplicativo Path. Fonte: Google Play. Adaptação: da autora (2014). Outro quesito importante que o autor (Clarck, 2012) ressalta é a questão dos botões do próprio sistema do dispositivo, pois, dependendo do sistema, pode ser mais ergonômico que os botões do aplicativo se posicionem acima ou abaixo da tela. Existem alguns outros conceitos que, segundo Walter Cybis (2010 p.255) podem ajudar o usuário a ter uma experiência mais completa. Veja o exemplo: uma pessoa está em outro país cujo idioma ela não fala bem. Encontra-se em um restaurante e deseja pedir um prato especifico e se comunicar com a garçonete. Para resolver a situação, 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 utilização. Além disso, existe a questão da disponibilidade do sistema, pois o usuário pode estar em uma região que não possui sinal de internet,. 2.3 Padrões de estrutura Agora que entendemos que as telas projetadas são mais do que apenas páginas, são um conjunto de pequenas partes, de interações que variam de acordo com a resolução de tela, com as possibilidades do dispositivo móvel, entre outros, vamos nos apropriar de conceitos de padrões de design que constroem o design a partir de módulos, entre outros conceitos. Para iniciar, iremos comentar alguns padrões de estrutura do design responsivo propostos por Lucke (Apud FROST, 2012, p. 132) que constroem o design a partir de módulos, pois assim poderão se adaptar em diferentes tamanhos de telas, desde os desktops até os smartphones (acompanhe as figuras ao final dos tópicos): - Mostly Fluid: Esse padrão define basicamente duas propostas de layouts modulados Figura 15. Erik Ford. Fonte: es/

23 44 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 2 CARACTERÍSTICAS PROJETUAIS DE APLICATIVOS MÓVEIS 45 Figura 16. Tres Colunas. Fonte: es/ Figura 17. List Apart. Fonte: 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) - Infinite List: estrutura de layout com rolagem vertical infinita, ou seja, quando o usuário abre a tela carrega algumas informações, e de acordo com a rolagem que o usuário faz, mais informações são carregadas. (Figura 23) - Generous Borders: estrutura de layout que usa grandes margens e espaços em branco ao redor de botões para melhor interação, geralmente usada em telas de grandes menus, em lista de ítens, entre outros. (Figura 24) - Text Clear Button: botão 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 usuário não precise apagar letra por letra de texto. (Figura 25) entender uma etapa de extrema importância em um projeto: a arquitetura de informação. No próximo tópico abordaremos conceitos de arquitetura de informação, navegação, UX, entre outros. Vistos rapidamente alguns padrões de estrutura do design responsivo, veremos os padrões propostos por Jennifer Tidwel (2011, p. 448) especificamente para design mobile (acompanhe as figuras ao final dos tópicos): - Vertical Stack: Estrutura de layout vertical, geralmente com apenas uma coluna e com grande rolagem. Nessa estrutura, as informações mais importantes são colocadas em cima. Geralmente utilizada em sites e webapps. (Figura 18) - Filmstrip: Estrutura de layout geralmente sem rolagem vertical, mas com rolagem horizontal, ou seja, através do gesto swipe (explicaremos no tópico 2.6 sobre gestos) o usuário pode acessar outras telas. Esse tipo de estrutura é recomendado para ser utilizado com poucas telas, pois senão pode ficar cansativo para o usuário. (Figura 19) - Touch Tools: Estrutura de layout, geralmente utilizada em aplicativos bastante imersivos. Essa estrutura permite que o usuário através de um toque na tela esconda ou faça aparecer os menus de controle do aplicativo. Isso serve para que, durante a imersão o usuário não precise ficar vendo tais botões. Tal estrutura é geralmente utilizada em aplicativos de jogos, de câmera, leitura de livros, entre outros. (Figuras 20 e 21) - Loading Indicators: Enquanto uma página carrega, é importante que o usuário perceba a evolução do carregamento, evitando que ele desista da ação. É um padrão utilizar um elemento gráfico mostrando o carregamento dos conteúdos, principalmente em jogos, vídeos, 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 usuário perceba atraves da cor, tipografia, entre outros elementos estéticos a consistência da identidade. É claro que se deve atentar em relação a quantidade de conteúdo e ao peso das imagens, etc. (Figura 27) A partir deste conhecimento é possível Figura 18. Twitter. Fonte: www. twitter.com Figura 19. Melissa WakeUp. Fonte: Google Play

24 46 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 2 CARACTERÍSTICAS PROJETUAIS DE APLICATIVOS MÓVEIS Arquitetura de informação e navegação Em projetos desktop, é usual a construção de sitemaps, fluxogramas e wireframes, geralmente nesta respectiva ordem. Já a construção de protótipos 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: Figura 23. Twitter com rolagem infinita. Fonte: Já nos projetos mobile, segundo Denis Kardys (2012), o processo se dá de maneira diferente. Inicia-se com rabiscos em papel, os wireframes também 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 não são estáticas, e sim com variadas intarações, o protótipo é essencial como parte da construção do projeto e, junto ao protótipo é construido o fluxograma. Os protótipos, tanto de wireframes como com a direção de arte, são importantes ferramentas para valorizar o trabalho perante o cliente, pois assim ele entende o processo e também a importância das tomadas de decisão de cada interação presente nos projetos. navegação nos projetos desktop: linear, hierárquico e não-linear. Na linear, o usuário navega em uma sequência específica de tela a tela. Já na navegação hierárquica, existem diferentes níveis de telas orientadas ao conteúdo e existem algumas restrições de navegação. Na navegação não-linear o usuário pode navegar livremente pelas telas sem nenhuma ordem específica e praticamente sem restrições. Veja na figura abaixo: Além dos protótipos os storyboards também são relevantes. A intenção do storyboard é mostrar passo a passo como vão acontecer as interações e, principalmente, as transições, tudo representado de forma estática. Essa técnica pode ser usada com wireframes de baixa fidelidade, ou seja, rascunhos simples. Figura 24. RunKeeper. Fonte: Figura 25. Chrome. Fonte: Google Play Figura 26. CandyCrush. Fonte: Google Play Figura 27. Bradesco. Fonte: Google Play Tanto o fluxograma, quanto o protótipo e o storyboard estão relacionados ao sistema de navegação do projeto, ou seja, é onde são definidos os caminhos que o usuário pode percorrer através das páginas. Existem três tipos básicos de sistemas de Figura 28. Sistemas de navegação. Fonte: Adaptação: da autora. Para definir o sistema de navegação é necessária uma avaliação da complexidade e proposta do projeto, pois cada um funciona de maneira diferente.

25 48 DESIGNMOB: PROPOSTA METODOLÓGICA PARA CRIAÇÃO DE INTERFACES DIGITAIS PARA DISPOSITIVOS MÓVEIS 2 CARACTERÍSTICAS PROJETUAIS DE APLICATIVOS MÓVEIS 49 Nos projetos mobile também podem ser utilizadas tais estruturas, porém não se recomenda muitos níveis de navegação, ou seja, conteúdos profundos. Outra característica é que no mobile, especialmente em Apps, a navegação não fica sempre explícita ao usuário, mas é sempre necessário visualizar ela através de um menu, ou no caso de apps para IOS, com uma navegagação global de até 5 itens, como é o caso do Facebook, mostrado anteriormente no Capítulo 1 na Figura Densidade Quando projetamos para desktop, desenhamos as telas em tamanho real, ou seja, se a resolução da tela for 1024x768px, criaremos neste mesmo tamanho, esta é outra grande diferença na hora de projetar para mobile, pois não projetamos em tamanho real. (2014) que mostra a resolução de diferentes dispositivos móveis e a sua densidade correspondente. A partir desta Figura é possivel perceber a diferença entre vários dispositivos e como é a proporção da densidade. Com esta gama de diferentes resoluções de dispositivos móveis é sempre necessário uma escolha consciente baseada em pesquisas de público alvo, etc. Na Figura a seguir veja um exemplo prático de densidade de 200%: 2.6 Gestos A partir do contexto das interfaces touchscreen a interação do usuário se dá através dos gestos realizados pelos dedos dos usuários. Para que os sistemas interpretem de maneira correta a interação existem padrões de gestos, e outros que podem mudar de sistema para sistema. Acompanhe na Figura os principais gestos: O conhecimento e entendimento destes gestos é essencial para o designer, visto que interferem diretamente na qualidade de interação do usuário, podendo proporcionar experiencias eficazes ou não. Além dos gestos existem também as transições que interferem na interação. 2.7 Transições O ambiente virtual é capaz de proporcionar experiências que não conheciamos no mundo real, as transições são um exemplo disso. Uma transição é a animação entre um momento inicial e um final em uma interface e está bastante presente nos dispositivos móveis. Em praticamente qualquer ação que o usuário provocar no sistema, vai haver uma transição duranta a reação do sistema. Veja alguns exemplos de transições na Figura a seguir: Figura 29. Tabela de densidade. Fonte: es/phone (2014) Adaptação: da autora. Para garantir maior qualidade de resolução nos dispositivos mobile existe o conceito de densidade (ou retina), que implica em projetar em maior resolução 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 transições tem na interação é reforçada a importância dos protótipos navegáveis, que testam as interações durante a Figura 32. Transições. Figura 30. Aplicativo Gogobot. Fonte: Adaptação: da autora. Figura 31. Gestos. Fonte: TouchGestureCards.pdf Adaptação: da autora.