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

Tamanho: px
Começar a partir da página:

Download "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: <http:// 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.

I - O que é o Mobilize-se

I - O que é o Mobilize-se Índice O que é o Mobilize-se...03 A campanha de lançamento...12 Divulgação da campanha...14 Como irá funcionar o sistema para o ouvinte da rádio...20 O que a rádio deve fazer para se inscrever no Mobilize-se...36

Leia mais

COMO CONQUISTAR CLIENTES COM APLICATIVOS PARA CELULAR

COMO CONQUISTAR CLIENTES COM APLICATIVOS PARA CELULAR COMO CONQUISTAR CLIENTES COM APLICATIVOS PARA CELULAR CONTEÚDO 1 2 3 4 5 6 Por que as empresas precisam estar conectadas ao mundo mobile Como os aplicativos mobile podem atrair mais clientes. Como os aplicativos

Leia mais

Post excerpt to catch readers attention and describe the story in short

Post excerpt to catch readers attention and describe the story in short Post excerpt to catch readers attention and describe the story in short A explosão do número de usuários de smartphones está promovendo uma mudança rápida na cultura de vendas e atendimento aos clientes.

Leia mais

A MO BI LID ADE NO A PR E SEN TA ÇÃO MET ODO LO GIA PAS SO A PASSO DA COM EN DA ÇÕES COM PRA BRA SIL

A MO BI LID ADE NO A PR E SEN TA ÇÃO MET ODO LO GIA PAS SO A PASSO DA COM EN DA ÇÕES COM PRA BRA SIL D CE A PR E SEN TA ÇÃO MET ODO LO GIA A MO BI LID ADE NO PAS SO A PASSO DA COM PRA RE COM EN DA ÇÕES BRA SIL 2. 3. 4. 5. 1. A PR E SEN TA ÇÃO Nós acreditamos em testes reais. Acreditamos que o planejamento

Leia mais

Manual do Usuário Nextel Cloud. Manual do Usuário. Versão 1.0.0. Copyright Nextel 2014. http://nextelcloud.nextel.com.br

Manual do Usuário Nextel Cloud. Manual do Usuário. Versão 1.0.0. Copyright Nextel 2014. http://nextelcloud.nextel.com.br Manual do Usuário Versão 1.0.0 Copyright Nextel 2014 http://nextelcloud.nextel.com.br 1 Nextel Cloud... 4 2 Nextel Cloud Web... 5 2.1 Página Inicial... 6 2.1.1 Meu Perfil... 7 2.1.2 Meu Dispositivo...

Leia mais

Fundamentos da Computação Móvel

Fundamentos da Computação Móvel Fundamentos da Computação Móvel (O Mercado Mobile no Brasil) Programação de Dispositivos Móveis Mauro Lopes Carvalho Silva Professor EBTT DAI Departamento de Informática Campus Monte Castelo Instituto

Leia mais

Inicialização Rápida do Novell Vibe Mobile

Inicialização Rápida do Novell Vibe Mobile Inicialização Rápida do Novell Vibe Mobile Março de 2015 Introdução O acesso móvel ao site do Novell Vibe pode ser desativado por seu administrador do Vibe. Se não conseguir acessar a interface móvel do

Leia mais

O futuro do YouTube - VEJA.com

O futuro do YouTube - VEJA.com Entrevista O futuro do YouTube 29/08/2009 10:49 Por Leo Branco Nesta semana, Chad Hurley, de 32 anos, um dos criadores do YouTube, esteve no Brasil e falou a VEJA sobre o futuro do maior site de vídeos

Leia mais

DESENVOLVIMENTO EM DISPOSITIVOS MÓVEIS UTILIZANDO BANCO DE DADOS

DESENVOLVIMENTO EM DISPOSITIVOS MÓVEIS UTILIZANDO BANCO DE DADOS DESENVOLVIMENTO EM DISPOSITIVOS MÓVEIS UTILIZANDO BANCO DE DADOS Leandro Guilherme Gouvea 1, João Paulo Rodrigues 1, Wyllian Fressatti 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil leandrog.gouvea@gmail.com,

Leia mais

Android. 10 vantagens do sistema Android em relação ao iphone

Android. 10 vantagens do sistema Android em relação ao iphone Android Android é um sistema operacional do Google para smartphones, TVs e tablets. Baseado em Linux e de código aberto, o sistema móvel é utilizado em aparelhos da Samsung, LG, Sony, HTC, Motorola, Positivo,

Leia mais

RELATÓRIO DO GOMOMETER

RELATÓRIO DO GOMOMETER RELATÓRIO DO GOMOMETER Análise e conselhos personalizados para criar sites mais otimizados para celular Inclui: Como os clientes de celular veem seu site atual Verificação da velocidade de carregamento

Leia mais

MOBILE APPS. Principais características. Permitir que o cliente compre produtos e serviços diretamente via app

MOBILE APPS. Principais características. Permitir que o cliente compre produtos e serviços diretamente via app MOBILE APPS Aplicativo para relacionamento e marketing digital, pronto para todos os dispositivos móveis, nas plataformas ios, Android (aplicativos nativos) e mobile web, para plataformas como BlackBerry

Leia mais

Introdução a Computação Móvel

Introdução a Computação Móvel Introdução a Computação Móvel Computação Móvel Prof. Me. Adauto Mendes adauto.inatel@gmail.com Histórico Em 1947 alguns engenheiros resolveram mudar o rumo da história da telefonia. Pensando em uma maneira

Leia mais

6/06/2012 09h26 - Atualizado em 26/06/2012 12h30 Boot to Gecko: o futuro celular da Mozilla

6/06/2012 09h26 - Atualizado em 26/06/2012 12h30 Boot to Gecko: o futuro celular da Mozilla 6/06/2012 09h26 - Atualizado em 26/06/2012 12h30 Boot to Gecko: o futuro celular da Mozilla O mercado brasileiro de dispositivos móveis em breve ganhará mais uma grande plataforma. Anunciado oficialmente

Leia mais

TENHA A SUA AGÊNCIA NO MERCADO DE APLICATIVOS MÓVEIS

TENHA A SUA AGÊNCIA NO MERCADO DE APLICATIVOS MÓVEIS TENHA A SUA AGÊNCIA NO MERCADO DE APLICATIVOS MÓVEIS MERCADO DE APLICATIVOS MÓVEIS POLITICA COMERCIAL E VENDAS FÁBRICA DE APLICATIVOS ÍNDICE EXPLORANDO RECURSOS COMPORTAMENTO DO USUÁRIO COMO MANTER SUA

Leia mais

Índice de ilustrações

Índice de ilustrações Sumário 1Dez novos recursos do windows 8...2 1.1Interface Metro...2 1.2Internet Explorer 10...4 1.3Gerenciador de Tarefas...5 1.4Painel de Controle...5 1.5Interface Ribbon...6 1.6Menu Iniciar...7 1.7Windows

Leia mais

Windows Phone: Acesse Configurações > Rede celular + SIM > Ativada/Desativada. Android: Deslize a tela para baixo e desmarque a opção de dados.

Windows Phone: Acesse Configurações > Rede celular + SIM > Ativada/Desativada. Android: Deslize a tela para baixo e desmarque a opção de dados. Sempre que você não estiver usando a conexão, desligue a internet do seu aparelho. Mesmo em espera, os programas do celular ou tablet ficarão atualizando com redes sociais, e-mails, entre outros. Com isso

Leia mais

UNIVERSIDADE FEDERAL FLUMINENSE ESCOLA DE ENGENHARIA MBA EM TV DIGITAL, RADIODIFUSÃO E NOVAS E NOVAS MÍDIAS

UNIVERSIDADE FEDERAL FLUMINENSE ESCOLA DE ENGENHARIA MBA EM TV DIGITAL, RADIODIFUSÃO E NOVAS E NOVAS MÍDIAS UNIVERSIDADE FEDERAL FLUMINENSE ESCOLA DE ENGENHARIA MBA EM TV DIGITAL, RADIODIFUSÃO E NOVAS E NOVAS MÍDIAS Trabalho final da disciplina Computadores, Redes, IP e Internet Professor: Walter Freire Aluno:

Leia mais

07 É NECESSÁRIO FAZER TREINAMENTO? 06 VERSÃO DE DEMONSTRAÇÃO 10 SUPORTE ÍNDICE INTRODUÇÃO CONCLUSÃO DIFICULDADES PELA FALTA DE MOBILIDADE

07 É NECESSÁRIO FAZER TREINAMENTO? 06 VERSÃO DE DEMONSTRAÇÃO 10 SUPORTE ÍNDICE INTRODUÇÃO CONCLUSÃO DIFICULDADES PELA FALTA DE MOBILIDADE ÍNDICE INTRODUÇÃO 01 DIFICULDADES PELA FALTA DE MOBILIDADE 02 MOBILIDADE: PORQUE INVESTIR 03 COMO BAIXAR 04 SMARTPHONE OU TABLET? 05 FUNCIONA COM E SEM CONEXÃO COM A INTERNET? 06 VERSÃO DE DEMONSTRAÇÃO

Leia mais

10 DICAS PARA TURBINAR SEU PACOTE DE DADOS. 1 - Desative os Dados do Celular. 2 Remova as notificações e atualizações automáticas

10 DICAS PARA TURBINAR SEU PACOTE DE DADOS. 1 - Desative os Dados do Celular. 2 Remova as notificações e atualizações automáticas 10 DICAS PARA TURBINAR SEU PACOTE DE DADOS 1 - Desative os Dados do Celular Sempre que você não estiver usando a conexão, desligue a internet do seu aparelho. Mesmo em espera, os programas do celular ou

Leia mais

navegação em miniatura

navegação em miniatura 50 :: Webdesign iphone: navegação em miniatura Se antes as ciganas pediam para ler a palma da sua mão, nos dias atuais é bem capaz desse exercício de previsão ser feito pela leitura de seu dispositivo

Leia mais

Universal Mobile Ad Package UMAP- v.2.0. Dezembro 2011

Universal Mobile Ad Package UMAP- v.2.0. Dezembro 2011 Universal Mobile Ad Package UMAP- v.2.0 Dezembro 2011 Emitida pela MMA North América Board of Directors SWAT Team e o Comitê Global MMA de Mobile Advertising. Proposta Este conjunto atualizado de diretrizes

Leia mais

DOWNLOAD DO APLICATIVO: INSTALAÇÃO DO APLICATIVO

DOWNLOAD DO APLICATIVO: INSTALAÇÃO DO APLICATIVO DOWNLOAD DO APLICATIVO: O aplicativo deve ser baixado pelo endereço: http://www.estudeadistancia.com/avamobile/ A partir do dia 03/06 será disponibilizado dois links para download: 1 download do aplicativo

Leia mais

Desde que entrou no mercado de smartphones, em 2007, esse é o trunfo da Apple perante a concorrência.

Desde que entrou no mercado de smartphones, em 2007, esse é o trunfo da Apple perante a concorrência. 20/12/2011-07h51 Casamento entre sistema e aparelhos é o trunfo da Apple LEONARDO MARTINS COLABORAÇÃO PARA A FOLHA Apesar da importância cada vez maior do software, o bom casamento entre o sistema operacional

Leia mais

Sumário Aspectos Básicos... 3 Como Empresas usam o Facebook... 3 Introdução ao Facebook... 4 Criando um Cadastro... 5 Confirmando E-mail...

Sumário Aspectos Básicos... 3 Como Empresas usam o Facebook... 3 Introdução ao Facebook... 4 Criando um Cadastro... 5 Confirmando E-mail... FACEBOOK Sumário Aspectos Básicos... 3 Como Empresas usam o Facebook... 3 Introdução ao Facebook... 4 Criando um Cadastro... 5 Confirmando E-mail... 8 Características do Facebook... 10 Postagens... 11

Leia mais

C.P.F. DOS ENVOLVIDOS: 105111179-06 085997089-29 093745209-23 KRIO. A integração entre a tecnologia e a comunicação para Jovens Aprendizes

C.P.F. DOS ENVOLVIDOS: 105111179-06 085997089-29 093745209-23 KRIO. A integração entre a tecnologia e a comunicação para Jovens Aprendizes C.P.F. DOS ENVOLVIDOS: 105111179-06 085997089-29 093745209-23 KRIO A integração entre a tecnologia e a comunicação para Jovens Aprendizes FLORIANÓPOLIS 2014 2 RESUMO: O projeto apresentado é resultado

Leia mais

OneDrive: saiba como usar a nuvem da Microsoft

OneDrive: saiba como usar a nuvem da Microsoft OneDrive: saiba como usar a nuvem da Microsoft O OneDrive é um serviço de armazenamento na nuvem da Microsoft que oferece a opção de guardar até 7 GB de arquivos grátis na rede. Ou seja, o usuário pode

Leia mais

Porto Seguro Guia Mobile

Porto Seguro Guia Mobile O Porto Seguro é o primeiro e único aplicativo mobile criado para divulgar as atrações, estabelecimentos e serviços da nossa cidade. O aplicativo oferece informações variadas sobre passeios, hospedagem,

Leia mais

Seminário GVcev E-COMMERCE, MOBILE E MÍDIAS SOCIAIS NO VAREJO. Está na Hora de Criar um App para sua loja? Wilson Cunha

Seminário GVcev E-COMMERCE, MOBILE E MÍDIAS SOCIAIS NO VAREJO. Está na Hora de Criar um App para sua loja? Wilson Cunha Seminário GVcev E-COMMERCE, MOBILE E MÍDIAS SOCIAIS NO VAREJO Está na Hora de Criar um App para sua loja? Wilson Cunha Mobile Commerce Quem deve ter; Website mobile; Aplicativos mobile; Diferenças Tecnologia;

Leia mais

INTRODUÇÃO Pesquisa Game Brasil 2015 é uma nova leitura de campo que traça o perfil do gamer brasileiro. Em 2013 a primeira versão realizada em parceria com o núcleo de Estudos e Negócios em Marketing

Leia mais

think with técnicas infalíveis para ter o melhor 25site mobile

think with técnicas infalíveis para ter o melhor 25site mobile think with técnicas infalíveis para ter o melhor 25site mobile A internet no celular é uma realidade gigantesca no Brasil. Basta dizer que 72% dos usuários de smartphones acessam a web todos os dias em

Leia mais

EI CLIENTE, ESTAMOS AQUI! Ebook especializado em SEO para busca local

EI CLIENTE, ESTAMOS AQUI! Ebook especializado em SEO para busca local EI CLIENTE, ESTAMOS AQUI! Ebook especializado em SEO para busca local Sumário participam deste ebook 3 Isso é realmente importante? 4 Cuidados com seu site 5 Site mobile ou design responsivo? 6 Dados estruturados

Leia mais

Sistema de Automação Comercial de Pedidos

Sistema de Automação Comercial de Pedidos Termo de Abertura Sistema de Automação Comercial de Pedidos Cabana - Versão 1.0 Iteração 1.0- Release 1.0 Versão do Documento: 1.5 Histórico de Revisão Data Versão do Documento Descrição Autor 18/03/2011

Leia mais

ESCOLHA UM TESTE PARA EXECUTAR

ESCOLHA UM TESTE PARA EXECUTAR ESCOLHA UM TESTE PARA EXECUTAR Acompanhe o ritmo de aceleração dos ciclos de lançamento. Descubra a automatização com um toque humano EXECUTE UM TESTE 26032015 Com a Borland, tanto analistas de negócios

Leia mais

edirectory Plataforma ios / Android

edirectory Plataforma ios / Android edirectory Plataforma ios / Android Levando seu site ao próximo nível Conheça o novo aplicativo do edirectory. E seja bem vindo a revolução em aplicativos para Diretórios Online. Mobile Completamente reestruturado

Leia mais

Unidade 4: Contextualização de Objetos de Aprendizagem

Unidade 4: Contextualização de Objetos de Aprendizagem Coordenação: Juliana Cristina Braga Autoria: Rita Ponchio Você aprendeu na unidade anterior a importância da adoção de uma metodologia para a construção de OA., e também uma descrição geral da metodologia

Leia mais

CARTEIRA VIRTUAL C A R D B O A R D CAMINHOS PONTOMOBI EDU

CARTEIRA VIRTUAL C A R D B O A R D CAMINHOS PONTOMOBI EDU CARTEIRA VIRTUAL G O O G L E C A R D B O A R D APLICAÇÕES E CAMINHOS!1 PONTOMOBI EDU INDICE CARACTERÍSTICAS PRINCIPAIS 4 OUTRAS CARACTERÍSTICAS 5 CUSTOMIZAÇÕES 6 EXEMPLOS DE APLICAÇÃO 8 DISTRIBUIÇÃO DOS

Leia mais

iphone 5S APRESENTAÇÃO

iphone 5S APRESENTAÇÃO Ideal Voz Empresarial iphone 5S O iphone 5 é uma verdadeira evolução do smartphone da Apple. Muito Fino e leve, o iphone 5 impressiona com seu design impecável e tela Retina de 4 polegadas. Apesar de seu

Leia mais

Manual do usuário (v 1.2.0) E-commerce

Manual do usuário (v 1.2.0) E-commerce Manual do usuário (v 1.2.0) E-commerce Sumário Acessando o sistema gerencial... 1 Enviando logomarca, banners e destaques... 1 Logomarca... 1 Destaques... 2 Banners... 3 Cadastrando produtos... 4 Embalagem...

Leia mais

Design de navegação para tablet : Abordagem projetual da revista digital Wired

Design de navegação para tablet : Abordagem projetual da revista digital Wired Design de navegação para tablet : Abordagem projetual da revista digital Wired Gabriel da Costa Patrocínio Universidade Anhembi Morumbi patrocínio.design@gmail.com O presente artigo tem como proposta analisar

Leia mais

Introdução à Arte da Ciência da Computação

Introdução à Arte da Ciência da Computação 1 NOME DA AULA Introdução à Arte da Ciência da Computação Tempo de aula: 45 60 minutos Tempo de preparação: 15 minutos Principal objetivo: deixar claro para os alunos o que é a ciência da computação e

Leia mais

edirectory ios / Android Plataforma

edirectory ios / Android Plataforma edirectory ios / Android Plataforma Criando lindos aplicativos com edirectory Uma revolução no espaço de diretórios mobile, bem vindo ao novo aplicativo do edirectory. Mobile Completamente reestruturado

Leia mais

Mobile Commerce. e-mail: wilson.cunha@viewit.com.br

Mobile Commerce. e-mail: wilson.cunha@viewit.com.br Mobile Commerce Wilson Cunha 30 anos de experiência em negócios. Formado em Tecnologia da Informação; E-commerce, Marketing Digital,. Há 06 anos em mobile commerce. Premiado no e-show 2013, melhor aplicativo

Leia mais

Guia Definitivo de Ferramentas para Micro Empreendedores Individuais

Guia Definitivo de Ferramentas para Micro Empreendedores Individuais Guia Definitivo de Ferramentas para Micro Empreendedores Individuais Introdução O Brasil já tem 4,7 milhões de microempreendedores individuais, segundo dados de janeiro de 2015 da Receita Federal. O incentivo

Leia mais

AULA 1 PHP O QUE É APACHE FRIENDS

AULA 1 PHP O QUE É APACHE FRIENDS O QUE É PHP Se você já programa PHP, aconselho que pule para o capítulo 7 desse livro. Pois até esse capitulo iremos abordar algoritmos em PHP até a construção de uma classe com seus métodos e atributos

Leia mais

Frameworks para criação de Web Apps para o Ensino Mobile

Frameworks para criação de Web Apps para o Ensino Mobile 393 Frameworks para criação de Web Apps para o Ensino Mobile Lucas Zamim 1 Roberto Franciscatto 1 Evandro Preuss 1 1 Colégio Agrícola de Frederico Westphalen (CAFW) Universidade Federal de Santa Maria

Leia mais

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br Manual do Usuário Versão 1.0.0 Copyright Vivo 2013 http://vivosync.com.br 1 1 Índice 1 Índice... 2 2 Vivo Sync... 5 3 Vivo Sync Web... 6 3.1 Página Inicial... 6 3.1.1 Novo Contato... 7 3.1.2 Editar Contato...

Leia mais

AMBIENTES ONLINE: que formato tem o ambiente que os jovens procuram online?

AMBIENTES ONLINE: que formato tem o ambiente que os jovens procuram online? AMBIENTES ONLINE: que formato tem o ambiente que os jovens procuram online? Edgar Marcucci Reis 1 Jéssica Naiara dos Santos Batista 2 Resumo: O artigo apresenta uma visão sobre os ambientes online encontrados

Leia mais

Tendências de comunicação para 2014. 89% dos brasileiros pesquisam preços na web. E-mail é 40 vezes mais eficiente que FB nas vendas

Tendências de comunicação para 2014. 89% dos brasileiros pesquisam preços na web. E-mail é 40 vezes mais eficiente que FB nas vendas Tendências de comunicação para 2014 Veja alguns temas que devem influenciar o setor 89% dos brasileiros pesquisam preços na web 78% acredita que na internet os produtos são mais baratos 63% utiliza smartphones

Leia mais

Número de pessoas com acesso à internet passa de 120 milhões

Número de pessoas com acesso à internet passa de 120 milhões MÍDIA KIT INTERNET Número de pessoas com acesso à internet passa de 120 milhões Segundo pesquisa da Nielsen IBOPE, até o 1º trimestre/2014 número 18% maior que o mesmo período de 2013. É a demonstração

Leia mais

Sumário. O que fazemos 3. Conversão para ebooks 5. Criação de ebooks 8. Transforme em ebook ou revista 11. Serviços de editoração 14

Sumário. O que fazemos 3. Conversão para ebooks 5. Criação de ebooks 8. Transforme em ebook ou revista 11. Serviços de editoração 14 Produção de ebooks Produção de ebooks Sumário O que fazemos 3 Conversão para ebooks 5 Criação de ebooks 8 Transforme em ebook ou revista 11 Serviços de editoração 14 Serviços de marketing e distribuição

Leia mais

GUIA DE RECURSOS SMART

GUIA DE RECURSOS SMART GUIA DE RECURSOS SMART Características dos aplicativos da SMART TV 1.Android 4.2 dual-core smart TV 2.Conexão de rede (com fio/sem fio/pppoe/wlan HP) 3. Sync-View (opcional) 4. Multi-screen Interativa

Leia mais

Aplicativo de inicialização rápida Novell Filr 1.0.2 Mobile

Aplicativo de inicialização rápida Novell Filr 1.0.2 Mobile Aplicativo de inicialização rápida Novell Filr 1.0.2 Mobile Setembro de 2013 Novell Inicialização rápida O Novell Filr permite que você acesse facilmente todos os seus arquivos e pastas do desktop, browser

Leia mais

ATIVIDADES PRÁTICAS SUPERVISIONADAS

ATIVIDADES PRÁTICAS SUPERVISIONADAS ATIVIDADES PRÁTICAS SUPERVISIONADAS 6ª Série Teoria da Computação Ciência da Computação A atividade prática supervisionada (ATPS) é um método de ensinoaprendizagem desenvolvido por meio de um conjunto

Leia mais

Fundamentos da Computação Móvel

Fundamentos da Computação Móvel Fundamentos da Computação Móvel (Plataformas Sistemas Operacionais e Desenvolvimento) Programação de Dispositivos Móveis Mauro Lopes Carvalho Silva Professor EBTT DAI Departamento de Informática Campus

Leia mais

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br Manual do Usuário Versão 1.0.0 Copyright Vivo 2013 http://vivosync.com.br 1 1 Índice 1 Índice... 2 2 Vivo Sync... 4 3 Vivo Sync Web... 5 3.1 Página Inicial... 5 3.1.1 Novo Contato... 6 3.1.2 Editar Contato...

Leia mais

Tópicos de Ambiente Web. Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres

Tópicos de Ambiente Web. Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres Tópicos de Ambiente Web Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres Roteiro Motivação Desenvolvimento de um site Etapas no desenvolvimento de software (software:site) Analise

Leia mais

Inicialização Rápida do Novell Messenger 3.0.1 Móvel

Inicialização Rápida do Novell Messenger 3.0.1 Móvel Inicialização Rápida do Novell Messenger 3.0.1 Móvel Maio de 2015 O Novell Messenger 3.0.1 e posterior está disponível para seu dispositivo móvel ios, Android BlackBerry suportado. Como é possível efetuar

Leia mais

O Office para ipad e iphone ficou bem melhor.

O Office para ipad e iphone ficou bem melhor. O Office para ipad e iphone ficou bem melhor. 5 novidades que você precisa saber sobre o Microsoft Office 1 Novos apps para iphone Word, Excel, PowerPoint e OneNote consistentes com a experiência do ipad.

Leia mais

Website para dispositivos Móveis. O futuro na palma de sua mão!

Website para dispositivos Móveis. O futuro na palma de sua mão! Website para dispositivos Móveis O futuro na palma de sua mão! Sites Mobile A Internet está sendo cada vez mais acessada através de telefones móveis e, como resultado, sites estão recebendo uma boa quantidade

Leia mais

Android. Escolhe o dispositivo Android certo!

Android. Escolhe o dispositivo Android certo! Android O Android é a plataforma mais popular do mundo das telecomunicações. Podemos usar todos os aplicativos do Google, existem mais de 600.000 aplicativos e jogos disponíveis no Google Play para nos

Leia mais

O conjunto é composto por duas seções: o App Inventor Designer e o App Inventor Blocks Editor, cada uma com uma função específica.

O conjunto é composto por duas seções: o App Inventor Designer e o App Inventor Blocks Editor, cada uma com uma função específica. Google App Inventor: o criador de apps para Android para quem não sabe programar Por Alexandre Guiss Fonte: www.tecmundo.com.br/11458-google-app-inventor-o-criador-de-apps-para-android-para-quem-naosabe-programar.htm

Leia mais

MANUAL DE UTILIZAÇÃO DAS MÍDIAS SOCIAIS CLUBE TURISMO

MANUAL DE UTILIZAÇÃO DAS MÍDIAS SOCIAIS CLUBE TURISMO MANUAL DE UTILIZAÇÃO DAS MÍDIAS SOCIAIS CLUBE TURISMO INTRODUÇÃO: As mídias sociais estão cada vez mais presentes no dia-a-dia das pessoas, oferecendo soluções e transformando as relações pessoais e comerciais.

Leia mais

Tutorial SD. Mobile and Smart devices Development Solution - Página 1

Tutorial SD. Mobile and Smart devices Development Solution - Página 1 Mobile and Smart devices Development Solution - Página 1 Introdução Hoje em dia, está claro para a indústria de TI a relevância que têm os smartphones, tablets e dispositivos inteligentes (os chamados

Leia mais

Planejamento de Mídias Sociais. Endireitados

Planejamento de Mídias Sociais. Endireitados Planejamento de Mídias Sociais Endireitados 1. Entendendo o Endireitados Quem nunca passou um bom tempo se preparando para um Exame, seja no cólegio, faculdade ou concurso público? São N horas de estudo,

Leia mais

RELATÓRIO FINAL DE PROJETO DE INICIAÇÃO CIENTÍFICA (PIBIC/CNPq/INPE)

RELATÓRIO FINAL DE PROJETO DE INICIAÇÃO CIENTÍFICA (PIBIC/CNPq/INPE) DESENVOLVIMENTO DE APLICAÇÕES PARA DISPOSITIVOS MÓVEIS PARA COLETA E DISSEMINAÇÃO DE DADOS (VERSÃO CLIENTE- SERVIDOR) RELATÓRIO FINAL DE PROJETO DE INICIAÇÃO CIENTÍFICA (PIBIC/CNPq/INPE) Victor Araújo

Leia mais

OPINIÃO. O futuro. do Flash

OPINIÃO. O futuro. do Flash O futuro do Flash Testes realizados por sites de grande audiência, como YouTube (http://www.youtube.com/ html5) e Vimeo (http://vimeo.com/blog:268), no uso de players em HTML 5 trouxeram à tona as discussões

Leia mais

Histórico de Revisão Data Versão Descrição Autor 19/09/2014 1.0 Implementação de itens essenciais para futuro aprimoramento.

Histórico de Revisão Data Versão Descrição Autor 19/09/2014 1.0 Implementação de itens essenciais para futuro aprimoramento. Documento de Requisitos 1 Documento de Requisitos Versão 1.2 Histórico de Revisão Data Versão Descrição Autor 19/09/2014 1.0 Implementação de itens essenciais para futuro aprimoramento. Camilo Fernandes

Leia mais

Sistemas Enturma: Manual de Ferramentas do Usuário

Sistemas Enturma: Manual de Ferramentas do Usuário versão do manual: 1 1 Apresentação A evolução da tecnologia vem provocando uma revolução no ensino. O acesso à Internet e a disseminação do uso do computador vêm mudando a forma de produzir, armazenar

Leia mais

Desenvolvendo para. Windows 8. Aprenda a desenvolver aplicativos para Windows Phone 8 e Windows 8. Ricardo R. Lecheta. Novatec

Desenvolvendo para. Windows 8. Aprenda a desenvolver aplicativos para Windows Phone 8 e Windows 8. Ricardo R. Lecheta. Novatec Desenvolvendo para Windows 8 Aprenda a desenvolver aplicativos para Windows Phone 8 e Windows 8 Ricardo R. Lecheta Novatec Copyright 2013 da Novatec Editora Ltda. Todos os direitos reservados e protegidos

Leia mais

Aviso. O conteúdo deste documento é de propriedade intelectual exclusiva da GVDASA Sistemas e está sujeito a alterações sem aviso prévio.

Aviso. O conteúdo deste documento é de propriedade intelectual exclusiva da GVDASA Sistemas e está sujeito a alterações sem aviso prévio. Guia de Utilização 2015 Aviso O conteúdo deste documento é de propriedade intelectual exclusiva da GVDASA Sistemas e está sujeito a alterações sem aviso prévio. Nenhuma parte desta publicação pode ser

Leia mais

Guia do usuário do PrintMe Mobile 3.0

Guia do usuário do PrintMe Mobile 3.0 Guia do usuário do PrintMe Mobile 3.0 Visão geral do conteúdo Sobre o PrintMe Mobile Requisitos do sistema Impressão Solução de problemas Sobre o PrintMe Mobile O PrintMe Mobile é uma solução empresarial

Leia mais

Vox4all Manual de Utilização http://arca.imagina.pt/manuais/manual Vox4all BR.pdf

Vox4all Manual de Utilização http://arca.imagina.pt/manuais/manual Vox4all BR.pdf Vox4all Manual de Utilização http://arca.imagina.pt/manuais/manual Vox4all BR.pdf A voz ao seu alcance! Software de comunicação aumentativa e alternativa para smartphone e tablet Projeto co financiado

Leia mais

MicroStrategy 10 Mobile Widgets. De Analytics e Transações até Geolocalização e Multimídia

MicroStrategy 10 Mobile Widgets. De Analytics e Transações até Geolocalização e Multimídia MicroStrategy 10 Mobile Widgets De Analytics e Transações até Geolocalização e Multimídia Agenda Introdução Visualizações Básicas (Gráficos) Visualizações Avançadas (Widgets) Transaction Services Demonstrações

Leia mais

DESENVOLVIMENTO DE CONTEÚDO EDUCACIONAL CENTRADO NO USUÁRIO BASEADO NA INTERNET APLICADO EM PROGRAMA DE EDUCAÇÃO A DISTÂNCIA

DESENVOLVIMENTO DE CONTEÚDO EDUCACIONAL CENTRADO NO USUÁRIO BASEADO NA INTERNET APLICADO EM PROGRAMA DE EDUCAÇÃO A DISTÂNCIA DESENVOLVIMENTO DE CONTEÚDO EDUCACIONAL CENTRADO NO USUÁRIO BASEADO NA INTERNET APLICADO EM PROGRAMA DE EDUCAÇÃO A DISTÂNCIA 05/2005 137-TC-C5 Sergio Ferreira do Amaral Faculdade de Educação da UNICAMP

Leia mais

Aula 1 Introdução, e conhecendo a Área de Trabalho

Aula 1 Introdução, e conhecendo a Área de Trabalho Aula 1 Introdução, e conhecendo a Área de Trabalho Na primeira aula deste curso, mostramos o porquê de começar a trabalhar neste sistema operacional, além das novidades que o sistema possui na sua versão.

Leia mais

Design de Interfaces e Usabilidade - Tópico 1

Design de Interfaces e Usabilidade - Tópico 1 Instituto Federal do Sertão-PE Design de Interfaces e Usabilidade - Tópico 1 Prof. Felipe Correia Conteúdo Por que estudar Design de Interfaces e Usabilidade?! Conceitos básicos sobre Design! Primeira

Leia mais

Projeto de Interfaces para Sistemas Contemporâneos. (ou IxD 101) CBSoft 2012 Tâmara Baía e Giselle Rossi

Projeto de Interfaces para Sistemas Contemporâneos. (ou IxD 101) CBSoft 2012 Tâmara Baía e Giselle Rossi Projeto de Interfaces para Sistemas Contemporâneos (ou IxD 101) CBSoft 2012 Tâmara Baía e Giselle Rossi Sobre o que é este curso? Definições de Design de Interação Características Atividade 1 - Foco

Leia mais

A WEB COMO PLATAFORMA Revolução do HTML5

A WEB COMO PLATAFORMA Revolução do HTML5 A WEB COMO PLATAFORMA Revolução do HTML5 Juliano Flores Prof. Lucas Plautz Prestes Centro Universitário Leonardo da Vinci - UNIASSELVI Gestão de TI (GTI034) 06/11/2012 RESUMO Escrever programas de computador,

Leia mais

Estudo Hábitos. Hábitos de uso e comportamento dos internautas nas mídias sociais e como as empresas podem melhorar sua atuação nas redes

Estudo Hábitos. Hábitos de uso e comportamento dos internautas nas mídias sociais e como as empresas podem melhorar sua atuação nas redes Estudo Hábitos 2012 Hábitos de uso e comportamento dos internautas nas mídias sociais e como as empresas podem melhorar sua atuação nas redes O estudo O Estudo Hábitos é realizado anualmente pela E.life

Leia mais

GANHE DINHEIRO FACIL GASTANDO APENAS ALGUMAS HORAS POR DIA

GANHE DINHEIRO FACIL GASTANDO APENAS ALGUMAS HORAS POR DIA GANHE DINHEIRO FACIL GASTANDO APENAS ALGUMAS HORAS POR DIA Você deve ter em mente que este tutorial não vai te gerar dinheiro apenas por você estar lendo, o que você deve fazer e seguir todos os passos

Leia mais

AppouWeb?Comparativode possibilidades

AppouWeb?Comparativode possibilidades Capítulo 3 AppouWeb?Comparativode possibilidades Eu sei que esse livro é sobre Web, então há uma clara tendência minha e do grupo de leitores para esse caminho. Mas nem sempre essa escolha é tão simples,

Leia mais

As melhores estratégias. online para hotéis

As melhores estratégias. online para hotéis As melhores estratégias online para hotéis Descubra como atrair mais visitas a seu site (SEO) As práticas recomendadas para receber mais reservas diretas através do site do seu hotel Veja as estratégias

Leia mais

CELULAR X COMPUTADOR APLICATIVO PARA CELULAR DICAS DO SEBRAE

CELULAR X COMPUTADOR APLICATIVO PARA CELULAR DICAS DO SEBRAE CELULAR X COMPUTADOR Atualmente, o Celular roubou a cena dos computadores caseiros e estão muito mais presentes na vida dos Brasileiros. APLICATIVO PARA CELULAR O nosso aplicativo para celular funciona

Leia mais

Webdesign Fluxo de Desenvolvimento do Webdesign

Webdesign Fluxo de Desenvolvimento do Webdesign Webdesign Fluxo de Desenvolvimento do Webdesign Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Tópicos da Aula 1. Design 2. Importância do

Leia mais

Por mais que falemos sobre Design Responsivo ou Mobile First, é preciso entender o que aconteceu até aqui e principalmente, essencialmente, o que impulsionou tamanha revolução para chegarmos à maneira

Leia mais

ebook Aprenda como aumentar o poder de captação do seu site. por Rodrigo Pereira Publicitário e CEO da Agência Retina Comunicação

ebook Aprenda como aumentar o poder de captação do seu site. por Rodrigo Pereira Publicitário e CEO da Agência Retina Comunicação por Rodrigo Pereira Publicitário e CEO da Agência Retina Comunicação Sobre o Autor: Sempre fui comprometido com um objetivo de vida: TER MINHA PRÓPRIA EMPRESA. Mas assim como você, eu também ralei bastante

Leia mais

Aula 1 - Introdução e configuração de ambiente de desenvolvimento

Aula 1 - Introdução e configuração de ambiente de desenvolvimento Aula 1 - Introdução e configuração de ambiente de desenvolvimento Olá, seja bem-vindo à primeira aula do curso para desenvolvedor de Android, neste curso você irá aprender a criar aplicativos para dispositivos

Leia mais

SISTEMA DE GESTÃO DE RECURSOS HUMANOS

SISTEMA DE GESTÃO DE RECURSOS HUMANOS SISTEMA DE GESTÃO DE RECURSOS HUMANOS MANUAL DE PROCEDIMENTOS V PORTAL WEB Revisão: 07 Versão: 7.9.109 JM Soft Informática Março, 2015 SUMÁRIO 1 AVALIAÇÕES... 9 2 PLANO DE DESENVOLVIMENTO INDIVIDUAL...

Leia mais

Este documento foi classificado pelo Bradesco Dia & Noite e o acesso está autorizado, exclusivamente, a colaboradores da Organização Bradesco.

Este documento foi classificado pelo Bradesco Dia & Noite e o acesso está autorizado, exclusivamente, a colaboradores da Organização Bradesco. Este documento foi classificado pelo Bradesco Dia & Noite e o acesso está autorizado, exclusivamente, a colaboradores da Organização Bradesco. Fatores que contribuem para conectar os Clientes na Era Digital

Leia mais

MOBILE MARKETING. Prof. Fabiano Lobo

MOBILE MARKETING. Prof. Fabiano Lobo MOBILE MARKETING Prof. Fabiano Lobo - Conforme estipulado no Termo de Uso, todo o conteúdo ora disponibilizado é de titularidade exclusiva do IAB ou de terceiros parceiros e é protegido pela legislação

Leia mais

1. StickerCenter... 3. 2. Menu Broadcast Stickers... 4. 3. Menu MyStickers... 9

1. StickerCenter... 3. 2. Menu Broadcast Stickers... 4. 3. Menu MyStickers... 9 1. StickerCenter... 3 1.1. O que é?... 3 1.2. O que são Stickers?... 3 1.3. Como acessar o StickerCenter?... 3 1.4. Como atualizar o StickerCenter?... 3 2. Menu Broadcast Stickers... 4 2.1. O que é?...

Leia mais

EIMOBILE INSTITUIÇÕES DE ENSINO MOBILE

EIMOBILE INSTITUIÇÕES DE ENSINO MOBILE UNIVERSIDADE CATÓLICA DE PELOTAS CENTRO POLITÉCNICO TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS EIMOBILE INSTITUIÇÕES DE ENSINO MOBILE por Miguel Aguiar Barbosa Trabalho de curso II submetido como

Leia mais

Introdução do Jornalismo Móvel

Introdução do Jornalismo Móvel Introdução do Jornalismo Móvel Semana 1: Visão geral das plataformas móveis, tendências e futuro Instrutor Técnico Móvel: Will Sullivan Instrutora Brasileira: Lorena Tárcia http://visual.ly/reaching-50-million-users

Leia mais

revista c i c l i s m o p o r c i c l i s t a s Publicidade Site e Revista sugestões orientações

revista c i c l i s m o p o r c i c l i s t a s Publicidade Site e Revista sugestões orientações revista c i c l i s m o p o r c i c l i s t a s Site e Revista sugestões orientações Sugestões Orientações Veja nas próximas páginas a descrição dos principais recursos que utilizamos. Todos eles podem

Leia mais

Plano de Parcerias BuenitStore

Plano de Parcerias BuenitStore Plano de Parcerias Agências, Desenvolvedores e Designers 18.03.2015 v.2 Objetivo Apresentar ao mercado de criação digital a nossa proposta de parceria e colaboração técnica para criação de projetos de

Leia mais

Fluxo de Desenvolvimento do Webdesign

Fluxo de Desenvolvimento do Webdesign Webdesign Fluxo de Desenvolvimento do Webdesign Apresentação, Fluxo de Desenvolvimento e Arquitetura da Informação Apresentação Thiago Miranda Email: mirandathiago@gmail.com Site: www.thiagomiranda.net

Leia mais

quarta-feira, 8 de outubro de 14

quarta-feira, 8 de outubro de 14 Internet 2G no Brasil Mais usada que 3G... Em julho, o 2G era usado em 48,5% dos celulares, nº menor que o registrado em janeiro (57,8%) 3G passou de 35,9% em janeiro para 44,3% em julho Tecnologia 4G

Leia mais

30 Dicas Sobre Marketing Online que toda empresa precisa saber

30 Dicas Sobre Marketing Online que toda empresa precisa saber 1 30 Dicas Sobre Marketing Online que toda empresa precisa saber reachlocal.com.br 11. 3081.0777 2014 ReachLocal, Inc. Todos os direitos reservados. ReachLocal é uma marca registrada. Todas as outras marcas

Leia mais

Manual de Usuário do UnB Webmail Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO

Manual de Usuário do UnB Webmail Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO Elaboração: Equipe de Suporte Avançado do CPD SA/SRS/CPD/UnB suporte@unb.br Universidade de Brasília Brasília / 2014 Resumo A

Leia mais