Successfully reported this slideshow.

WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet

948 views

Published on

Trabalho de conclusão de curso que tem como objetivo propor um aplicativo para smartphone direcionado ao segmento esportivo do skate que auxilie o usuário a registrar e a compartilhar vídeos que revelam a realização de manobras, fazendo deste
conteúdo matéria-prima para uma rede social organizada em forma de aplicativo.
O trabalho foi desenvolvido com base em uma metodologia específica para produtos digitais – o Projeto E.

Published in: Design
  • Be the first to comment

  • Be the first to like this

WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet

  1. 1. FACULDADE DE DESIGN BRUNO SARTORI QUADROS WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet Porto Alegre 2015
  2. 2. BRUNO SARTORI QUADROS WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet Trabalho de Conclusão de Curso apresen- tado à Faculdade de Design da Uniritter Laureate International Universities, como requisito parcial para obtenção do título de Bacharel em Design. Orientador(a): Prof. Ms. Andréa Capra Porto Alegre 2015
  3. 3. Dados Internacionais de Catalogação na Publicação (CIP) Q1w Quadros, Bruno Sartori. Wall Tricks App: aplicativo para registro e compartilhamento de manobras de skate na internet / Bruno Sartori Quadros. – 2015. 78 f.: il ; 30 cm. Monografia (graduação) – Centro Universitário Ritter dos Reis, Faculdade de Design, Porto Alegre, 2015. Orientador: Profa. Dra. Andréa Capra. 1. Design de Interação. 2. Aplicativos. 3. Redes Sociais. I. Título. II. Capra, Andréa. CDU 7.05 Ficha catalográfica elaborada no Setor de Processamento Técnico da Biblioteca Dr. Romeu Ritter dos Reis
  4. 4. AGRADECIMENTOS Primeiramente agradeço aos meus pais, Antonio e Maria Inês, que me deram suporte durante toda a minha jornada acadêmica e profissional, com muito amor e afeto. À minha irmã Bianca, minha eterna companheira que, mesmo do outro lado do oceano, sempre está presente nos nossos corações (e também pelo Skype). A mi- nha namorada Katherine, que me apoiou ao longo de toda essa caminhada e me mostrou o real valor da vida acadêmica, e por ser uma pessoa que admiro muito e que pude me espelhar para minha formação acadêmica. Vocês são a minha base e têm todo meu amor e minha eterna gratidão. Ao Superplayer, empresa que fez parte de praticamente toda minha formação acadêmica, por ser mais que um ambiente profissional, mas principalmente um am- biente de aprendizado diário. Agradeço em especial ao Pedro Loureiro por ter me acolhido e estar sempre disposto a compartilhar seu vasto conhecimento e ao Gus- tavo Goldschmidt por sempre me incentivar a superar desafios e a “sonhar grande”. À todos os professores da Uniritter Laureate Universities que tive o privilégio de aprender, trabalhar e conhecer. Em especial minha orientadora Andréa Capra e aos professores Jaire Passos, Heli Meurer, Claudio Salvalaio e Daniel Quintana Sperb. Vocês têm extrema importância na minha formação acadêmica e sou muito grato por isso. Agradeço também aos meus colegas da Uniritter e à todos aqueles que esti- veram comigo durante esta trajetória, direta ou indiretamente, contribuindo de algu- ma forma. Muito obrigado!
  5. 5. “Se enxerguei mais longe, foi porque me apoiei nos ombros de gigantes.” (Isaac Newton)
  6. 6. RESUMO Este trabalho de conclusão de curso tem como objetivo propor um aplicativo para smartphone direcionado ao segmento esportivo do skate que auxilie o usuário a re- gistrar e a compartilhar vídeos que revelam a realização de manobras, fazendo des- te conteúdo matéria-prima para uma rede social organizada em forma de aplicativo. O trabalho foi desenvolvido com base em uma metodologia específica para produtos digitais – o Projeto E. Palavras-chave: Aplicativo; rede social; skate; interface gráfica; design de interação.
  7. 7. ABSTRACT The Final Assignment consists of a smartphone application directed to the skateboard sports segment, which helps the user to record and share videos of their tricks, making this content primordial for a social network App. The work was developed based on a specific methodology for digital products - "Projeto E". Keywords: App; social media; skateboard; interface design; interaction design.
  8. 8. 8 LISTA DE FIGURAS Figura 1 - Metodologia Projetual - Projeto E ...........................................................16 Figura 2 – Publicação feita pelo autor em grupos do Facebook................................21 Figura 3 - Publicação da pesquisa feita pela FGSKT ................................................22 Figura 4 – Infográfico feito com as resultados da pesquisa.......................................23 Figura 5 – Condição atual do compartilhamento de manobras..................................24 Figura 6 – Condição pretendida para o compartilhamento de manobras. .................25 Figura 7 – Taxonomia do projeto. ..............................................................................26 Figura 8 – Aplicativo Nike SB App. ............................................................................28 Figura 9 – Aplicativo OnFlow. ....................................................................................29 Figura 10 – Aplicativo Riders. ....................................................................................30 Figura 11 – Aplicativo Skatespots..............................................................................31 Figura 12 – Aplicativo Instagram................................................................................32 Figura 13 – Aplicativo Vine.........................................................................................33 Figura 14 – Aplicativo Youtube. .................................................................................34 Figura 15 – Comparativo de funcionalidades.............................................................36 Figura 16 – Análise estrutural e mofológica (Nike SB App). ......................................38 Figura 17 – Análise funcional (Nike SB App). ............................................................39 Figura 18 – Resultado da análise de usabilidade (Nike SB)......................................40 Figura 19 – Identidade visual do aplicativo Nike SB ..................................................40 Figura 20 – Paleta cromática do aplicativo Nike SB ..................................................41 Figura 21 – Análise estrutural e mofológica (Riders). ................................................41 Figura 22 – Análise funcional (Riders). ......................................................................42 Figura 23 – Resultado da análise de usabilidade (Riders).........................................43 Figura 24 Identidade visual do aplicativo Riders........................................................43 Figura 25 – Paleta cromática do aplicativo Riders.....................................................44 Figura 26 – Lista de verificação. ................................................................................44 Figura 27 - Card sorting para publicações. ................................................................46 Figura 28 - Card sorting do aplicativo. .......................................................................47 Figura 29 - Wireframe do cartão de publicação de vídeo. .........................................48 Figura 30 - Wireframe do menu principal do aplicativo..............................................49 Figura 31 – Wireframe da área de publicações do aplicativo. ...................................50
  9. 9. Figura 32 – Tarefa 1: Captura e publicação de vídeo no aplicativo...........................51 Figura 33 - Tarefa 2: Curtir uma publicação e comentá-la.........................................52 Figura 34 – Definição do nome do produto...............................................................53 Figura 35 – Resultado final da assinatura visual do produto. ....................................54 Figura 36 – Malha diagramacional do aplicativo........................................................55 Figura 37 – Fonte tipográfica definida para o aplicativo.............................................56 Figura 38 – Estágios criativos para o ícone “não gostei”. ..........................................57 Figura 39 – Família iconográfica do aplicativo...........................................................58 Figura 40 – Matriz cromática do aplicativo.................................................................59 Figura 41 – Mapeamento de expressões...................................................................60 Figura 42 – Principais telas do aplicativo Wall tricks..................................................61 Figura 43 – Criação de conta: pop-up de conversão..................................................62 Figura 44 – Captura em vídeo e publicação de uma manobra...................................63
  10. 10. SUMÁRIO 1 INTRODUÇÃO....................................................................................................... 12 2 JUSTIFICATIVA..................................................................................................... 13 3 OBJETIVOS........................................................................................................... 15 3.1 OBJETIVO GERAL ...........................................................................................15 3.2 OBJETIVOS ESPECÍFICOS.............................................................................15 4 METODOLOGIA .................................................................................................... 16 5 DESENVOLVIMENTO PROJETUAL .................................................................... 19 5.1 CONTEXTUALIZAÇÃO ....................................................................................19 5.1.1 Questões projetuais.................................................................................19 5.1.2 Identificação dos usuários......................................................................20 5.1.3 Condição atual e condição pretendida ..................................................24 5.1.4 Situação inicial bem e situação final bem definida ..............................25 5.1.5 Taxonomia ................................................................................................25 5.2 DESCONSTRUÇÃO .........................................................................................27 5.2.1 Análise de similares e referencias .........................................................27 5.2.2 Comparativo de funcionalidades............................................................35 5.2.3 Estruturais, morfológicas, funcionais e heurísticas.............................37 5.2.3.1 Nike SB App ....................................................................................................38 5.2.3.2 Riders ..............................................................................................................41 5.3 VERIFICAÇÃO..................................................................................................44 5.4 RECONSTRUÇÃO ...........................................................................................45 5.4.1 Definição das ferramentas, funcionalidades e conteúdos...................45 5.4.2 Wireframe, wireflows e caso de uso. .....................................................47 5.5 IDENTIDADE ....................................................................................................52 5.5.1 Definição da assinatura visual................................................................53 5.5.2 Editoração e diagramação ......................................................................55 5.5.3 Definição das fontes tipográficas...........................................................56 5.5.4 Definição da imagética ............................................................................56 5.5.5 Definição da matriz cromática ................................................................58 5.6 DIFERENCIAÇÃO ............................................................................................59 5.7 DESENVOLVIMENTO ......................................................................................60 6 CONSIDERAÇÕES FINAIS................................................................................... 64
  11. 11. REFERÊNCIAS......................................................................................................... 66 APÊNDICE – GERAÇÃO DE ALTERNATIVAS....................................................... 67 ANEXO A – MATCH – CHECKLIST PARA AVALIAÇÃO DA USABILIDADE DE APLICATIVOS PARA CELULAR TOUCHSCREEN................................................ 70
  12. 12. 12 1 INTRODUÇÃO Este trabalho apresenta uma proposta de aplicativo para smartphone direcio- nado ao segmento esportivo do skate. Assim, este projeto buscou responder o se- guinte problema de pesquisa: como projetar um aplicativo para smartphone direcio- nado à prática do skate que auxilie o usuário a registrar e a compartilhar suas manobras, consolidando este conteúdo como central para uma rede social? Para tanto, o presente trabalho baseou-se no Projeto E como metodologia norteadora e foi organizado em sete “macro-etapas”. As três primeiras etapas da metodologia foram responsáveis por identificar e entender o problema, assim como investigar e analisar soluções já existentes no mercado. Com isso, foi elaborado um escopo com requisitos, restrições e possibili- dades para o projeto. A etapa seguinte foi responsável por definir toda a arquitetura da informação do produto. Já para quinta etapa ficou o encargo de definir a parte estética seguido da etapa de diferenciação do produto perante seus concorrentes no mercado. Na sétima e última etapa finalizou-se o projeto apresentando as principais telas do produto.
  13. 13. 13 2 JUSTIFICATIVA A popularização das redes sociais online atende a um grande número de pes- soas, tribos, com diferentes objetivos, em um contexto livre para a vivência de expe- riências em grupo com a possibilidade de compartilhar e encontrar conteúdos de interesse. Existem muitas redes sociais focadas em determinados nichos. Entre tantas pode-se citar como exemplo o Behance1 . A empresa define-se como uma plataforma centralizadora de conteúdo do mundo criativo, na qual o pro- fissional se mantém atualizado, acha inspirações para seus trabalhos a partir de pro- jetos encontrados na plataforma e também divulga seu portfólio (BEHANCE, ca.[2015]). Ao mesmo tempo o Behance também é utilizado por muitas empresas referências na indústria criativa em busca de novos talentos. Se tratando de redes sociais focadas em esporte, mais precisamente em ska- te, há uma carência muito grande para este seguimento. Segundo o site Cem Por- cento Skate2 (2012), conceituada revista da área, foram encomendadas à Datafolha pela Confederação Brasileira de Skate (CBSK) informações a respeito da presença de skatistas na população brasileira, bem como o perfil dos praticantes do esporte. Os resultados da pesquisa feita no ano de 2010 mostram que existe cerca de 3.800.000 (três milhões e oitocentos mil) skatistas no país, revelando um crescimen- to de 20% comparado à última pesquisa de 2006. Outro aspecto positivo é a presen- ça cada vez mais relevante de praticantes do esporte em variadas classes sociais. O crescimento elevado na classe C (9%) e a manutenção do número entre as classes A e B (42%, somadas) é prova eminente da aproximação do universo do skate com as diversas realidades socioeconômicas do país. O skate posiciona-se democrati- camente distribuído entre as camadas econômicas, ficando cada vez mais errôneo rotulá-lo como um esporte somente da elite ou de classes menos favorecidas. O aumento do número de praticantes de skate tem um reflexo direto na eco- nomia, segundo o site Estadão PME3 (2012), o setor fatura em torno de R$ 500 mi- lhões por ano. O site Pequenas Empresas Grandes Negócios (PEGN)4 (2010) 1 Disponível em: <http://www.behance.net/about>. Acesso em 30 de abr. de 2015 2 Disponível em: < http://cemporcento.uol.com.br/fiksperto/o-skate-cresce-no-brasil>. Acesso em 30 de abr. de 2015 3 Disponível em: < http://pme.estadao.com.br/noticias/noticias,skate-vira-negocio-na-mao-de- praticantes,2157,0.htm>. Acesso em 30 de abr. de 2015 4 Disponível em: < http://pegntv.globo.com/Jornalismo/PEGN/0,,MUL1607206-17958,00- CRESCE+MERCADO+DE+SKATE+NO+BRASIL.html>. Acesso em 30 de abr. de 2015
  14. 14. 14 acrescenta ainda que o Brasil é o país com a segunda maior indústria mundial do seguimento: só fica atrás dos Estados Unidos. Portanto, a proposta deste projeto centrou-se em desenvolver um aplicativo de rede social focado no segmento esportivo do skate, que proporcione aos usuários gravar vídeos que mostrem a realização de manobras diretamente da plataforma e, em seguida, compartilhar o conteúdo com suas conexões da rede. Assim, como a plataforma Behance, o usuário poderá, através do aplicativo, encontrar inspirações para novas manobras além de divulgar suas próprias manobras. A plataforma ainda abre a possibilidade para grandes empresas de agregar publicidade focada no seu público-alvo, encontrar novos talentos e divulgação de marcas, utilidades que podem auxiliar a economia do esporte e crescer ainda mais.
  15. 15. 15 3 OBJETIVOS 3.1 OBJETIVO GERAL Projetar um aplicativo para smartphone direcionado à prática do skate que auxilie o usuário a registrar e a compartilhar vídeos que mostram a realização de manobras, sob a configuração de uma rede social. 3.2 OBJETIVOS ESPECÍFICOS a) Desenvolver uma pesquisa para definir as diretrizes do projeto; b) Analisar aplicativos do mesmo segmento; c) Validação de heurísticas adaptada para smartphone pelo GQS (Grupo de Qualidade de Software) da UFSC (Universidade Federal de Santa Catari-na). d) Projetar o aplicativo a partir de uma guideline.
  16. 16. 16 4 METODOLOGIA Para nortear o projeto utilizou-se o método projetual “Projeto E”, desenvolvido por Heli Meurer (2015) e aproveitado desde 2008 em disciplinas sobre projetos de dígitos virtuais do curso de Design Gráfico na Uniritter Laureate International Univer- sities. O Projeto E caracteriza-se por ser uma metodologia que auxilia no desenvol- vimento de projetos de dígitos virtuais e engloba as seguintes fases: Contextualiza- ção (identificar, definir e delimitar o problema), Desconstrução (investigação, análi- ses e avaliação de conteúdo, conceitos e contextos), Verificação (restrições, requisitos e possibilidades), Reconstrução (escopo, esqueleto e estrutura do proje- to), Identidade (definição da identidade visual), Diferenciação (avaliação da persona- lidade visual), Desenvolvimento (modelo funcional navegável) e Validação (identifi- cação e correção de possíveis erros). A Figura 1 representa graficamente as oito etapas da metodologia, que serão detalhadas em seguida. Figura 1 - Metodologia Projetual - Projeto E Fonte: Projeto E 5 . 5 Disponível em: <http://www.projetoe.com>. Acesso em 30 de abr. de 2015.
  17. 17. 17 Contextualização: Está é a etapa inicial da metodologia projetual, que con- siste levantar todo o contexto envolvido no projeto, desde o seu público-alvo até a tecnologia que será usada no seu desenvolvimento. Desconstrução: O objetivo desta fase é excussão de pesquisas e uma análi- se sincrônica de produtos relevantes ao projeto. Os resultados serão analisados e apontados os pontos fortes e fracos encontrados, que servirão de referência no de- senvolvimento do projeto. Verificação: A partir dos resultados obtidos nas duas últimas etapas, na fase de verificação será elaborado uma lista de restrições, requisitos e possibilidades, sintetizados em forma de listas de verificação que nortearão o projeto. Reconstrução: Esta fase é definida por sucessiva geração de alternativas a partir de rascunhos, esboços, esquemas, fluxogramas entre outras técnicas e méto- dos. A partir de então começam a ser definidas as funcionalidades e ferramentas que existirão no produto proposto. Todas as definições deverão ser apresentadas através de casos de uso, workflows e wireframes detalhados. Identidade: Esta etapa tem como finalidade o desenvolvimento da identidade visual do projeto, alinhado com elementos gráfico-visuais que irão fazer parte do produto, como os grids utilizados para a diagramação do conteúdo, padrão cromáti- co, tipografia, ícones e botões. Diferenciação: Para esta etapa o objetivo é avaliar a personalidade visual de- finida e desenvolvida na etapa de identidade. Através de uma análise feita pelos usuários, de caráter principalmente mercadológico, é possível identificar se o posici- onamento gráfico-visual está dentro do planejado ou se precisará ser revisado. Desenvolvimento: Ao ter toda a arquitetura da informação e a definição de todas as telas do projeto, inicia-se o seu desenvolvimento. Com isso é recomendável construir um modelo navegável funcional, onde simule as funcionalidades e intera- ções do produto. A partir de um modelo navegável é possível realizar avaliações heurísticas por parte de testes de interação junto com os usuários.
  18. 18. 18 Validação: Está etapa diz respeito a avaliações e testes técnico-funcionais e com usuários. Geralmente, inicia-se logo após os primeiros resultados da etapa de reconstrução e prossegue no decorrer do planejamento do produto. Basicamente, ela visa identificar e corrigir possíveis erros de programação e de usabilidade. No presente projeto esta etapa não será aplicada. Para isso teria que ser de- senvolvida a partir de um profissional da área de programação, o que não é o foco do projeto. O Projeto E tem como base a metodologia proposta por Garrett (2003) e agrupa processos, métodos e conceitos extraídos de diversos pensadores clássicos e contemporâneos do design que contemplam Archer (1966), Bonsiepe (1984), Bür- dek (2006), Löbach (2007) e Gomes (2011), a fim de satisfazer as necessidades de projetos focados em ambientes digitais.
  19. 19. 19 5 DESENVOLVIMENTO PROJETUAL Neste capítulo será apresentado todo o desenvolvimento projetual. Sua divi- são foi organizada a partir das etapas propostas pelo método Projeto E. 5.1 CONTEXTUALIZAÇÃO Para Meurer (2015), a contextualização, etapa inicial do projeto, consiste em identificar, definir e delimitar o problema. Para auxiliar o desenvolvimento desta eta- pa os autores indicam uma gama de ferramentas que devem ser escolhidas levando em conta a natureza de cada projeto. Tendo em vista tais informações, para o projeto aqui proposto foram definidas as ferramentas: questões projetuais, identificação dos usuários, condição atual e condição pretendida, Situação inicial bem e situação final bem definida e taxonomia que serão introduzidas e desenvolvidas no decorrer deste capítulo. 5.1.1 Questões projetuais No método de questões projetuais, Meurer (2015) realiza uma adaptação das questões projetuais desenvolvidas pelo Bonsiepe (1984) para o contexto de projetos digital. O que projetar? Projetar um aplicativo para smartphone direcionado a prática do skate que auxilie o usuário a registrar e compartilhar vídeos que mostram a realização de suas manobras esportivas, consolidando o conteúdo em uma rede social. Por que projetar? É muito comum os praticantes do esporte realizarem registros em vídeos de manobras que tenham executado. Muitos desses registros são compartilhados em diversas redes sociais online como Facebook, Instagram, Youtube, Vimeo, entre ou- tras. Levando isso em consideração, o foco desse projeto é ser uma plataforma cen- tralizadora de registros de manobras realizadas pelos praticantes do skate, assim
  20. 20. 20 como estimular a interação do usuário com a plataforma e com outros usuários da rede. Como projetar? A partir do auxílio da metodologia projetual "Projeto E", que em suas etapas contemplam: Contextualização, Desconstrução, Validação, Reconstrução, Identida-de, Diferenciação e Desenvolvimento . Para quem se destina o projeto? Praticantes ou simpatizantes da prática do skate que possuem um smartpho- ne com acesso à internet. Com qual tecnologia? A plataforma de desenvolvimento será para smartphone e inicialmente será desenvolvida uma versão para Android, escrita em Java. Posteriormente será lança- da uma versão iOS, escrita em Objective C. A aplicação acessará dados remotos, por meio de uma API REST, esta API será escrita em javascript sobre o framework Node.js. O armazenamento de dados será no banco de dados documental MongoDB. A API será servida pelo container Nginx e será hospedada inicialmente no Heroku.com. Os vídeos serão hospedados no Youtube, onde os uploads serão feito por sua API. O stream dos vídeos será usando os componentes de vídeo dos SDKs do Google, tanto para Android quanto para iOS. 5.1.2 Identificação dos usuários Para melhor entender o público-alvo e com a finalidade de captar informações relevantes para o projeto, foi realizada uma pesquisa quali-quantitativa. Para tanto, elaborou-se um questionário com 5 perguntas de múltipla escolha e 5 dissertativas, totalizando 10 questões. As questões podem ser divididas em 3 grupos. O primeiro tem o intuito de coletar informações básicas do usuário, como sexo e idade. Já se- gundo grupo tem o objetivo de compreender melhor como é a relação do entrevista- do com a prática do esporte. O terceiro e último grupo tem o proposito de descobrir
  21. 21. 21 como o entrevistado consome e interage no âmbito digital com conteúdos relaciona- do ao tema central do projeto. A pesquisa foi desenvolvida com o auxílio da ferramenta TypeForm6 . O ques- tionário da pesquisa foi realizada entre os dias 7 e 29 de abril de 2015 em grupos do Facebook que abordam o tema central do projeto, a prática do skate. Foi publicado na página pessoal do autor e ainda enviado mensagens privadas para federações, atletas e marcas do esporte (Figura 2). Figura 2 – Publicação feita pelo autor em grupos do Facebook. Fonte: Facebook. Toda estratégia de divulgação resultou em uma publicação feita pela Federa- ção Gaúcha de Skate (FGSKT) na sua página no Facebook (Figura 3) que, junto com outras publicações paralelas, ajudou a pesquisa alcançar 100 respostas em menos de um mês de aplicação. 6 Disponível em: <http://www.typeform.com>. Acesso em 30 de abr. de 2015
  22. 22. 22 Figura 3 - Publicação da pesquisa feita pela FGSKT Fonte: Facebook 7 . Ao término da coleta de dados foi montado um infográfico com as informa- ções mais relevantes para o projeto que está representado na Figura 4. 7 Disponível em: < https://www.facebook.com/FGSKT/posts/832337866802252>. Acesso em 30 de abr. de 2015.
  23. 23. 23 Figura 4 – Infográfico feito com as resultados da pesquisa. Fonte: Figura elaborada pelo autor. Com infográfico montado contendo as informações mais relevantes extraídas da pesquisa, é possível mapear o perfil dos prováveis usuários do aplicativo: Jovens com idades entre 16 a 30 anos (68%), do sexo masculino (94%) que andam de skate pelo menos três vezes na semana (60%). Possuem smar- tphone (95%) e o utilizam para registrar vídeos de manobras (73%) e comparti- lhá-las em redes sociais (61%). Estas informações são extremamente relevantes e servirão como base para desenvolver todas outras ferramentas da etapa de Contextualização.
  24. 24. 24 5.1.3 Condição atual e condição pretendida Meurer (2015) aconselha para essa etapa investigar em que estado se encon- tram os produtos similares ao projeto, quais funcionalidades e suas características de uso. Com isso, é possível considerar sua condição atual em refletir sobre melho- rias e novos recursos que diferenciarão o projeto no mercado, definindo a condição pretendida para o projeto. Condição atual Como pode-se perceber com o suporte da pesquisa apresentada anterior- mente muitos vídeos de manobras são gerados por praticantes. Porém, dos poucos aplicativos existentes focados no seguimento, nenhum conseguiu se firmar no Brasil. O conteúdo acaba ficando fragmentado em diversas redes sociais, o que pode aca- bar deixando o usuário confuso a respeito de onde seria o melhor lugar para ele compartilhar suas manobras (Figura 5). Outro ponto importante que deve ser ressaltado é que não existe nenhum aplicativo focado no segmento que tenha uma versão em língua portuguesa o que pode ajudar no distanciamento dos usuários brasileiros. Figura 5 – Condição atual do compartilhamento de manobras. Fonte: Figura elaborada pelo autor. Condição pretendida Pretende-se desenvolver um aplicativo que centralize em uma só rede social todo o conteúdo de manobras de skate, que atualmente encontra-se fragmentado em diversas redes sociais. Com isso, o usuário poderá registrar e compartilhar suas
  25. 25. 25 manobras na rede social para que sejam visualizadas, avaliadas e comentadas. Além disso, destaca-se que o produto possuirá uma versão em português (Figura 6). Figura 6 – Condição pretendida para o compartilhamento de manobras. Fonte: Figura elaborada pelo autor. 5.1.4 Situação inicial bem e situação final bem definida A situação inicial bem definida, tem como objetivo definir o produto, seu públi- co e seus possíveis cenários de uso. Já na situação final bem definida serve para definir de que forma será feito o produto para satisfazer as expectativas do público (MEURER, 2015). Situação inicial bem definida Projetar um aplicativo para smartphone direcionado a prática do skate que auxilie o usuário a registrar e compartilhar suas manobras, consolidando o conteúdo em uma rede social. Situação final bem definida Interface gráfica amigável de fácil uso que atenda as necessidades dos prati- cantes de skate e cumpra os objetivos proposto no presente projeto. 5.1.5 Taxonomia Para Brod (2009), a taxonomia nada mais é que uma classificação criada pelo homem para definir qualificações para todas as coisas, seres vivo e fenômenos. A
  26. 26. 26 taxonomia pode ser aplicada em 5 aspectos diferentes, são eles: Saber, contínua, alfabética, temporal, locacional e categorial. No presente projeto foi utilizado a taxonomia categorial (Figura 7), que foi ins- pirada na classificação feita por Carl Von Lineu, em seu livro Systema Naturae (apud BROD, 2009) propôs uma classificação simplificada. Sua classificação segue a se- guinte estrutura: Reino, conjunto de todos os Filos; Filos, conjunto das Classes; Classes, conjunto das Ordens; Ordens, conjunto das Famílias; Famílias, conjunto de Gêneros; Gêneros, conjunto de Espécies; Espécies, conjunto de indivíduos com se- melhanças anatômicas e funcionais, com capacidade de reprodução entre si (BROD, 2009). Figura 7 – Taxonomia do projeto. Fonte: Figura elaborada pelo autor. Na finalização da etapa de Contextualização é possível entender melhor o problema proposto e como agem os futuros usuários da solução do projeto, até mesmo propor um escopo preliminar para o projeto. Com essa informações registra- das será mais fácil analisar os concorrentes do mercado e saber enxergar quais são seus pontos fortes e fracos que servirão de informação para o projeto aqui proposto. Estas análises de concorrentes é o assunto do capítulo a seguir, Desconstrução.
  27. 27. 27 5.2 DESCONSTRUÇÃO A etapa de desconstrução tem o objetivo de analisar e avaliar conteúdos, conceitos e contexto, com o fim de auxiliar o desenvolvimento de projetos. Para Meurer (2010) a etapa de desconstrução é relevante para levantar informações e conhecimento que possam ajudar nas futuras tomadas de decisões necessárias pa- ra o projeto. Para a Desconstrução foram definidas três ferramentas de apoio, são elas: Similares e Referências, Comparativos de Funcionalidades e Estruturais, morfológi- cas, funcionais e heurísticas. 5.2.1 Análise de similares e referências A Análise de similares e referências é feita através da avaliação de produtos existentes no mercado que sirvam de subsídios para o projeto, por sua similaridade com o tema ou por ser referência para um determinado fim. Com isso, são levanta- dos os pontos positivos e negativos de cada projeto analisado (MEURER, 2015). O critério da escolha dos projetos que seriam analisados foi definir aplicativos que atinjam o mesmo público-alvo do projeto aqui proposto. Para tanto, foram esco- lhidos para análise o aplicativos Nike SB, OnFlow, Riders e SkateSpots. Outro obje- tivo foi analisar aplicativos que tenham o foco social de compartilhamento de mídias (fotos/vídeos). Para esta etapa foram selecionados os aplicativos Instagram, Vine e Youtube. Nike SB App: O aplicativo pertence a Nike (Figura 8), gigantesca marca do segmento esportivo. A empresa descreve o produto como uma comunidade virtual de skate, onde a principal função do aplicativo é usuário poder filmar suas manobras diretamente pela plataforma e compartilhar com seus contatos. O Nike Sb App é gra- tuito e tem possibilidade de comprar mercadorias da Nike dentro do próprio produto. Atualmente só está disponível para plataforma iOS e sua nota na loja é 4,5.
  28. 28. 28 Figura 8 – Aplicativo Nike SB App. Fonte: Figura elaborada pelo autor. Pontos positivos: • Ao instalar, é possível conhecer o serviço sem obrigatoriedade de criar uma conta. • Possui uma família de ícones personalizada e contextualizada com o tema do skate. • Layout bem organizado e com bastante área de respiro entre os elementos apresentados na tela. • Há possibilidade de editar o vídeo logo após ser gravando e selecionar um trecho para deixar em câmera lenta. • Possui jogos interativos para engajar os usuários entre si. Pontos negativos • Alguns momentos os ícones ficam muito pequenos ruim de clicar. Ex.: ícone de cancelar ao gravar um vídeo ou sair da exibição tela cheia. OnFlow: O aplicativo OnFlow (Figura 9) é semelhante ao do Nike SB, porém possui menos funcionalidades e tem um diferencial da geolocalização onde o usuá- rio pode publicar junto com o vídeo o local onde a manobra foi executada. O serviço só é disponível para plataforma iOS, que tem nota 4 na loja da Apple.
  29. 29. 29 Figura 9 – Aplicativo OnFlow. Fonte: Figura elaborada pelo autor. Pontos positivos • Ao publicar um vídeo de uma manobra o usuário pode cadastrar também o local onde a manobra foi realizada. Com isso os outros usuários que visua-lizarem tem acesso as coordenadas para chegar no local. • É possível cadastrar junto ao vídeo o perfil do usuário que filmou a mano- bras (caso ele também esteja cadastrado na rede). Pontos negativos • É obrigado a criar conta para conhecer o produto. • Diagramação confusa, elementos muito próximos. • Padrão cromático não é muito eficaz. O contraste de verde no fundo escuro fica cansativo para os olhos. Riders: Fundado em 2013, a empresa se define como uma comunidade de esportes radicais onde os usuários podem aprender, aperfeiçoar e compartilhar suas manobras. Ao contrário dos outros aplicativos analisados, o Riders (Figura 10) não é exclusivamente voltado para o público do skate, o aplicativo também contempla con-
  30. 30. 30 teúdos para BMX, Longboard, Kiteboard, Snowboard, Surf, Mountain Bike, Scooter, Aggressive Inline, Ski, Wakeboard, Wakeskate, Motocross, Windsurf e Parkour. Apesar de o aplicativos ter uma área social para compartilhamento de vídeos criados pelo usuário, seu maior foco são nos vídeos gravados com profissionais que ensinam como executar determinadas manobras. O aplicativo é gratuito e está dis- ponível para dispositivos iOS (avaliado com 5 estrelas), Android (avaliado com 4,5 estrelas) e Windows Phone (avaliado com 5 estrelas). Figura 10 – Aplicativo Riders. Fonte: Figura elaborada pelo autor. Pontos positivos • Possui um grande acervo de tutoriais em vídeos de manobras. • Existe no aplicativo uma espécie de glossário com termos utilizados no es- porte, muito bom para praticantes iniciantes. Pontos negativos • Falta de personalidade. Padrão de ícones muito similar a utilizada no apli- cativo Nike SB. • Não é possível visualizar os vídeos em tela cheia. • De uma forma geral o aplicativo é muito lento, mesmo com conexão WI-FI.
  31. 31. 31 • Os vídeos são muito pesados o que acarreta em demora e travamento du- rante a execução. • aplicativo apresentou mais de uma vez falhas que foi necessário reiniciá-lo. SkateSpots: O skateSpots (Figura 11) é uma espécie de um catálogo de pis- tas e obstáculos bons para andar de skate. É uma plataforma colaborativa em que os usuário podem contribuir e cadastrar com fotos e descrições seus locais favoritos para andar de skate. O aplicativo é gratuito e está disponível para dispositivos iOS (avaliado com 4,5 estrelas) e Android (avaliado com 3,5 estrelas) Figura 11 – Aplicativo Skatespots. Fonte: Figura elaborada pelo autor. Pontos positivos • Por não possuir nenhum local cadastrado no Brasil não foi possível usar o aplicativo. Portanto, não tem nenhum ponto relevante para ser destacado como positivo. Pontos negativos • É obrigado a criar conta para conhecer o produto. • Não possui locais brasileiros cadastrados. • Falta de personalidade. O layout lembra muito o usado pelo Instagram.
  32. 32. 32 • aplicativo é bem lento e trava bastante. • Apesar de ser uma plataforma colaborativa, o aplicativo não tem nenhum funcionalidade de interação entre os usuários da rede. Instagram: Lançado em 2010, o Instagram (Figura 12) descreve-se como uma ferramenta simples para capturar e compartilhar momentos do mundo a partir de fotos e vídeos. O aplicativo é gratuito e está disponível para dispositivos iOS (avaliado com 4,5 estrelas) e Android (avaliado com 4,5 estrelas) onde juntos já con- ta com 300 milhões de usuários ativos por mês. Figura 12 – Aplicativo Instagram. Fonte: Figura elaborada pelo autor. Pontos positivos • Atalho "Double Tapping" deixa a forma de amar uma foto muito mais sim- ples e convidativa para usuário se expressar. • Diagramação que valoriza a imagem. • Interface limpa e com icones leves. Pontos negativos • Na tela de atualizações "seguindo" o histórico é muito pequeno e não tem como ter acesso arquivos publicados após 24h.
  33. 33. 33 • Período de postagem é contabilizado por semana, ao invés, de me- ses/anos. Com isso é difícil do usuário rapidamente saber há quanto tempo foi feita a postagem. É apresentado, por exemplo "12 semanas" e nesse caso para o usuário seria mais fácil se fosse apresentado "3 meses". • Não aparece a data exata de quando foi feita a publicação da foto. Vine: Lançado pelo Twitter em 2012, o Vine (Figura 13) é serviço de compar- tilhamento de vídeos com no máximo 6 segundos de duração. Com ele, usuário po- de gravar e editar o vídeo pelo próprio aplicativo e divulgar na rede. No aplicativo também possível navegar através de vídeos publicado por outros usuários, além de grupos de vídeos classificados por tema e vídeos de tendências. Figura 13 – Aplicativo Vine. Fonte: Figura elaborada pelo autor. Pontos positivos • Ao instalar o aplicativo, o primeiro contato após criar a conta ele convida o usuário a personalizar o serviço com seus gostos. • Tanto o padrão cromático quanto o iconográfico apresentam uma lingua- gem divertida nos seus traços e nas suas cores. Contextualizada com o público-alvo do produto.
  34. 34. 34 • aplicativo possui pop-ups que são exibidos quando o app é aberto, convi- dando o usuário a experimentar funcionalidades que ele ainda não tenha usado. Pontos negativos É obrigado a criar conta para conhecer o produto. Youtube: Lançado em maio de 2005, o Youtube (Figura 14) é uma plataforma colaborativa focada no compartilhamento de vídeos. Contando todas plataformas (web e mobile) o serviço possui mais de um bilhão de usuários, onde são enviadas 300 horas de vídeo ao YouTube a cada minuto. Segundo o site da empresa, metade dos acessos são feitas através de dispositivos móveis. O serviço possui aplicativos para as plataformas Android (avaliado com 4 es- trelas), iOS (avaliado com 2,5 estrelas) e Windows Phone (avaliado com 3 estrelas). Figura 14 – Aplicativo Youtube. Fonte: Figura elaborada pelo autor. Pontos positivos • É possível utilizar o produto sem necessidade de criar conta. • Diagramação bem limpa e organizada.
  35. 35. 35 • Caso o aplicativo seja fechado no meio da execução de um vídeo, ao abrir o vídeo novamente ele inicia exatamente no ponto onde estava sendo exe- cutado. Pontos negativos • Nenhum ponto negativo relevante para ser registrado. 5.2.2 Comparativo de funcionalidades O objetivo desta etapa é levantar funcionalidades que sejam pertinentes ao projeto aqui proposto e investigar entre os aplicativos analisados quais possuem ou não estes recursos, fazendo assim um comparativo entre os serviços (MEURER, 2015). O resultado desta análise pode ser visto na Figura 15.
  36. 36. 36 Figura 15 – Comparativo de funcionalidades. Fonte: Figura elaborada pelo autor. A partir dos resultados pode-se perceber que a maioria dos aplicativos possu- em, no que se trata de funcionalidades, um comportamento similar de uso. Além dis- so, foram identificadas duas oportunidades bem claras que podem ser exploradas no projeto aqui proposto. A primeira é que o usuário possa ter acesso ao conteúdo sem a necessidade de criar uma conta. Com isso o usuário terá uma experiência mais rápida e prazero- sa, sem a necessidade de passar por formulário de cadastro antes de usar o produto e avaliar se vale a pena ou não se cadastrar. Entre os quatro aplicativos do segmen- to analisados somente o Nike SB utiliza esse recurso.
  37. 37. 37 A segunda oportunidade seria projetar o aplicativo na língua portuguesa, le- vando em consideração que nenhum aplicativo do segmento analisado tenha uma versão em português. Esta é uma ótima oportunidade de conquistar o mercado bra- sileiro para o segmento. 5.2.3 Estruturais, morfológicas, funcionais e heurísticas Assim como a análise de similares e referências, Meurer (2015) sugere a utili- zação de mais quatro análises com intuito de entender melhor as características téc- nicas dos aplicativos, são elas: Análise estrutural: Tem como objetivo entender aprofundadamente a forma estrutural do produto, conhecer seus componentes e analisar seus funcionamentos (MEURER, 2015). Análise morfológica: É responsável por identificar e classificar estruturas formais do produto a partir de padrões que surgem em seu uso. Estes padrões po- dem ser com base de princípios geométricos, transições, concordâncias, acabamen- to cromático ou tratamento de superfície (MEURER, 2015). Análise funcional: Sua meta é analisar as características de uso do produto, estruturando suas características técnicas e funcionais. Heurísticas de usabilidade: São um conjunto de regras gerais que apresen- tam características comuns em interfaces usáveis que levam em conta aspectos psi- cológicos, computacionais e sociológicos que ajudam a avaliar a usabilidade do pro- duto (NIELSEN, 1995). Para a análise do presente projeto, optou-se em utilizar as heurísticas adap- tadas para smartphones desenvolvidas pelo Grupo de Qualidade de Software (GQS) da UFSC (WANGENHEIM & BORGATTO, 2012). Isso será feito com o auxílio de um checklist criado pelo grupo. O checklist completo, assim como as legendas explicati- vas para cada nível classificativo de usabilidade são apresentadas no Anexo A. .
  38. 38. 38 Análise da identidade gráfico-visual: A identidade gráfico-visual contempla as funções estéticas e simbólicas do produto. Mais precisamente, Löbach (apud MEURER, 2015) define-a em quatro elementos institucionais: os principais (logotipo e símbolo) e os secundários (cores padrão e tipografia ou alfabeto padrão). Análise cromática: Sua finalidade é identificar quais são as cores predomi- nantes no projeto. Com isso analisar se existe um cuidado no contraste entre elas para não existir ruídos na comunicação com os usuários e se elas possuem algum significado específico para o produto (MEURER & SZABLUK, 2010) 5.2.3.1 Nike SB App Análise estrutural e morfológica: Para a presenta análise foi seleciona a te- la considerada mais relevante no aplicativo, a tela de publicações. A análise deta- lhada é apresentada na Figura 16. Figura 16 – Análise estrutural e morfológica (Nike SB App). Fonte: Figura elaborada pelo autor. Análise funcional: Já para analisar o funcionamento do aplicativo foi selecio- nada a tarefa chave no aplicativo, a gravação seguida de publicação de uma mano- bra na rede. A análise detalhada é apresentada na Figura 17.
  39. 39. 39 Figura 17 – Análise funcional (Nike SB App). Fonte: Figura elaborada pelo autor. Heurísticas de usabilidade: O resultado da análise para o aplicativo da Nike SB foi 50.4 pontos (Figura 18), o que é considerado como usabilidade alta pelo GQS.
  40. 40. 40 Figura 18 – Resultado da análise de usabilidade (Nike SB). Fonte: Figura elaborada pelo autor. Análise da identidade gráfico-visual: Para a assinatura visual do aplicativo, a Nike utiliza a identidade visual da submarca focada no skate que é chamada de Nike Skateboarding ou Nike SB. A identidade consiste do logotipo e o símbolo con- sagrado da marca junto as letras SB (abreviatura para skateboarding) que utiliza a mesma tipografia itálica usada no logotipo oficial da marca, na maioria dos casos a identidade visual é aplicada na cor preta. Na Figura 19 é apresentada a identidade visual correspondente assim como a sua aplicação no ícone do aplicativo. Figura 19 – Identidade visual do aplicativo Nike SB Fonte: Figura elaborada pelo autor. Análise Cromática: O aplicativo tem em sua paleta cromática somente três cores: azul, branco e preto (Figura 20). A cor predominante é o preto, que está pre- sente no background de todo aplicativo, além disso as cores preto e branco também estão bastante presentes nas fotos apresentadas no produto, a única coisa que real- ça fora do padrão cromático são os vídeos que são publicados pelos usuários.
  41. 41. 41 Figura 20 – Paleta cromática do aplicativo Nike SB. Fonte: Figura elaborada pelo autor. 5.2.3.2 Riders Análise estrutural e morfológica: Assim como para o aplicativo da Nike Sb, foi mantido mesmo critério para escolha da tela a ser analisada, a tela de publica- ções. A análise detalhada é apresentada na Figura 21. Figura 21 – Análise estrutural e mofológica (Riders). Fonte: Figura elaborada pelo autor.
  42. 42. 42 Análise funcional: O mesmo acontece para a análise de funcionalidades a tarefa escolhida é a gravação seguida de publicação de uma manobra na rede. A análise detalhada é apresentada na Figura 22. Figura 22 – Análise funcional (Riders). Fonte: Figura elaborada pelo autor. Heurísticas de usabilidade: O aplicativo Riders recebeu a nota 45.4 pontos (Figura 23) na avaliação. O GQS define esta pontuação como um aplicativo com usabilidade razoável. Esta classificação significa que o aplicativo responde aos que- sitos de consistência de padrões e apresentar boa visibilidade de status.
  43. 43. 43 Figura 23 – Resultado da análise de usabilidade (Riders). Fonte: Figura elaborada pelo autor. Análise da identidade gráfico-visual: No aplicativo Riders a sua assinatura visual (Figura 24) é composta somente de um logotipo onde a letra R é itálica, o que passa um sensação de movimento, contrastando-se das demais que são regulares e rígidas. A letra R também é utilizada como símbolo da marca em aplicações como o ícone do aplicativo. Figura 24 Identidade visual do aplicativo Riders Fonte: Figura elaborada pelo autor. Análise Cromática: Assim como o aplicativo Nike SB, o backgroud do Riders é predominantemente preto, porém sua paleta cromática é mais extensa (Figura 25). O padrão cromático é constituído por seis cores, são elas: branco, preto, laranja, azul, amarelo e verde. As cores vivas (laranja, azul, amarelo e verde) estão presentes tanto na inter- face do aplicativo quando na comunicação da marca.
  44. 44. 44 Figura 25 – Paleta cromática do aplicativo Riders Fonte: Figura elaborada pelo autor. 5.3 VERIFICAÇÃO Ao finalizar da etapa de Desconstrução, Meurer (2015) sugere que seja feita uma lista de restrições, de requisitos e de possibilidades para o projeto. Para fazer a lista de verificação, deve ser feita baseando-se em todos os dados adquiridos nas etapas anteriores. Na Figura 26 é apresentado a lista de verificação completa para o projeto. Figura 26 – Lista de verificação. Fonte: Figura elaborada pelo autor.
  45. 45. 45 Requisitos: Os requisitos determinados para o projeto podem ser divididos em dois tipos. O primeiro refere-se aos princípios básicos que devem existir no apli- cativo para que seja lançado no mercado, como: poder gravar vídeos diretamente da plataforma e possuir uma comunicação alinhada com o público que irá utilizar o pro- duto. Já o segundo refere-se ao conjunto de informações coletadas a partir de análi- ses dos produtos similares disponíveis no mercado e pesquisas com o público-alvo do produto. Para o presente estudo foram determinados os requisitos mínimos a partir de análise dos produtos similares no mercado e pesquisa direcionada ao público-alvo. Foi possível constatar a inexistência de aplicativo deste segmento na língua portu- guesa, bem como informações a respeito do público-alvo, as quais revelam que 57% dos participantes possuem smartphones com sistema Android e, entre os aplicativos similares analisados, existe somente um para este sistema. Restrições: Conforme definição dos requisitos, o aplicativo a ser projetado será voltado ao sistema Android. Como restrição para o aplicativo pode-se assinalar que será baseado nas guidelines determinadas pelo Google. Oportunidades: Foram ressaltados algumas oportunidades que ajudarão a melhorar a experiências dos usuários no aplicativo, como: não existir a necessidade de criar uma conta para poder conhecer o produto e a possibilidade do usuário po- der compartilhar o conteúdo publicado. Com isso, os usuários ajudariam o aplicativo a se propagar de uma forma orgânica, onde os próprios usuários estariam divulgan- do o produto em outra redes sociais. Ao finalizar a lista de verificação o projeto encontra-se com o escopo delimita- do e pronto para a fase seguinte da metodologia, a Reconstrução. 5.4 RECONSTRUÇÃO 5.4.1 Definição das ferramentas, funcionalidades e conteúdos. Esta etapa consiste basicamente em definir o escopo do projeto e tem como objetivo estipular uma estrutura hierárquica e inter-relações entre conteúdos. Para
  46. 46. 46 isso, Meurer (2015) indica o uso do card sorting (cartões sortidos). Segundo Martin e Hanington (2012) o método que, para projetos digitais, auxilia a organizar a navega- ção, menus, taxonomia e ainda ajuda a desenvolver quadros que potencializam a autonomia dos usuários para encontrar a informação que necessita. Para execução da tarefa foi necessário dividi-la em duas etapas: a primeira foi definir como seria a experiência do objetivo central do aplicativo, visualização e inte- ração com vídeos publicados. A solução foi levantar todas as funcionalidades que contemplarão a interação dos usuários da rede com as publicações, o resultado é apresentado na Figura 27. Figura 27 - Card sorting para publicações. Fonte: Figura elaborada pelo autor. A partir das funcionalidades e interações dos vídeos definidas foi aplicado no- vamente o método com o intuito de organizar a forma que os vídeos serão apresen- tados no aplicativo. Na Figura 28 é apresentado o resultado final da estrutura do aplicativo.
  47. 47. 47 Figura 28 - Card sorting do aplicativo. Fonte: Figura elaborada pelo autor. 5.4.2 Wireframe, wireflows e caso de uso. Esta etapa consiste em colocar em prática o escopo definido para o projeto. De acordo com Meurer (2015), aconselha-se o desenvolvimento de wireframes (es- boços iniciais do produto), wireflows (fluxos de telas) e casos de uso (aplicação de determinadas tarefas do aplicativo). Como o objetivo do projeto é fazer um aplicativo voltado para sistema An- droid, foi estipulado que toda apresentação gráfica e estrutural do projeto seguirá as diretrizes definidas pelo próprio Google, chamada Material Design8 . O Google descreve que o Material Design tem como objetivo criar um padrão visual que valoriza princípios clássicos de um bom design. Com isso a empresa dis- ponibiliza um site completo de boas práticas para produção de interfaces gráficas. 8 Disponível em: <http://www.google.com/design/spec/material-design/introduction.html>. Acesso em 3 de mai. de 2015
  48. 48. 48 A seguir será apresentado os desenvolvimentos das etapas de wireframes, wireflows e casos de uso tendo como norteador as diretrizes do Material Design. Wireframes: Assim como para definição das ferramentas, funcionalidades e conteúdos do produto; o primeiro desenvolvimento gráfico foi definir como será a apresentação dos conteúdos postados no aplicativo. No Material design existe uma forma particular para apresentação de informa- ções multimídias denominado "Cartões". O guia define os cartões como uma forma eficaz de apresentar o conteúdo na tela composto por diferentes elementos. Uma das principais vantagens dos cartões são suas adaptações para elementos com di- mensões e ações variadas. Para o aplicativo aqui proposto serão utilizados cartões para publicações de vídeos no aplicativo entre outras informações inseridas pelos usuários. Na Figura 29 apresenta-se a estruturação de cartão padrão de publicação adaptado para o projeto aqui proposto. Figura 29 - Wireframe do cartão de publicação de vídeo. Fonte: Figura elaborada pelo autor. A partir da conclusão do cartão de publicação dos vídeos, é hora de estruturar a forma de navegação entre as área do aplicativo. Para esse fim foi estipulado que as principais navegações do sistema serão feita pelo menu lateral, como apresenta- do na Figura 30.
  49. 49. 49 Figura 30 - Wireframe do menu principal do aplicativo. Fonte: Figura elaborada pelo autor. Um ponto bem importante para o aplicativo é que, quando aberto a primeira vez, não seja obrigatório a criação de conta. Isso é um diferencial perante a os con- correntes analisados, nos quais só é possível conhecer o produto após a criação de uma conta. Na sessão número 1 apresentada na imagem 30, onde existe a "Área do usuário", mudará o layout para uma chamada convidativa para criar uma conta ou fazer o login se for a primeira abertura do aplicativo ou se não estiver ”logado” com nenhuma conta no momento. Definida a forma básica de navegação, o próximo passo foi especificar as te- las internas do aplicativo. Na Figura 31 apresenta-se o modo como ficará a tela da área "Descobrir", local onde o usuário poderá ter acesso aos vídeos que estão em destaque em toda a rede. O quando o aplicativo for aberto pela primeira vez ou quando não estiver ”logado” com nenhuma conta, essa será a tela inicial da aplica- ção.
  50. 50. 50 Figura 31 – Wireframe da área de publicações do aplicativo. Fonte: Figura elaborada pelo autor. Nesta sessão foram apresentados os wireframes principais do sistema, tendo como o principal objetivo demonstrar como será a distribuição dos elementos na tela do aplicativo. Na próxima sessão será possível visualizar o funcionamento dos wire- frames através dos wireflows e caso de uso. Wireflows e casos de uso: Com a finalidade testar o funcionamento dos wireframes foi realizado um teste dos wireflows a partir de casos de uso do aplicati- vo. Para isso, foram determinadas duas tarefas básicas do sistema. A Tarefa 1 consistem em o usuário alimentar a rede publicando um vídeo de uma manobra, já a Tarefa 2 tem como objetivo demonstrar o usuário interagindo com o conteúdo da rede a partir de uma avalição de “gostei” e um comentário realizado em uma mano- bra publicada por outro usuário. Tarefa 1: Na Figura 32 é apresentado o passo a passo de como será a publi- cação de um vídeo no aplicativo.
  51. 51. 51 Figura 32 – Tarefa 1: Captura e publicação de vídeo no aplicativo. Fonte: Figura elaborada pelo autor.
  52. 52. 52 Tarefa 2: A Figura 33 representa os passos para realizar uma avalição de “gostei” e um comentário em uma publicação feita por outro usuários da rede. Figura 33 - Tarefa 2: Curtir uma publicação e comentá-la. Fonte: Figura elaborada pelo autor. 5.5 IDENTIDADE A etapa da identidade tem a incumbência de refinar os wireframes estruturais em um produto que transmita empatia, credibilidade e confiabilidade (MEURER, 2015). Para chegar neste objetivo foram selecionadas as ferramentas: definição da assinatura visual, editoração e diagramação, definição das fontes tipográficas, defi- nição imagética e definição cromática. Suas resoluções serão demonstradas no de- correr do deste capítulo.
  53. 53. 53 5.5.1 Definição da assinatura visual Quando o produto não possui nome, tampouco uma identidade visual, é ne- cessário criar a partir do zero. Meurer (2015) aconselha o uso de métodos de auto- res especializados no desenvolvimento de identidade visual de marcas. Para tanto lançou-se mão das ferramentas definidas por Alina Wheeler (2009) com a finalidade de desenvolver um nome e uma identidade visual para o aplicativo. Nome: Wheeler (2009) utiliza uma frase de Danny Altman, criador e diretor criativo da A Hundred Monkeys para sintetiza a importância da ligação do nome de um produto com o consumidor: "O nome certo cativa a imaginação e conecta-se com as pessoas que você deseja atingir"9 (Wheeler, 2009, p.20). Levando isso em consi- deração, recorreu-se a ferramenta de brainstorming para auxiliar a descobrir solu- ções de nomes que tivessem algum vínculo entre o produto e os futuros usuários. O ponto forte da ferramenta afirma-se, num primeiro momento, na quantidade de alter- nativas, mais do que a qualidade delas, sendo que estranhezas são bem-vindas (MARTIN & HANINGTON, 2012). Tendo um bom número de alternativas de nomes geradas foi realizada uma etapa de eliminações, seguida por vários testes de fusões até chegar em uma alternativa satisfatória. A solução final é apresentado na Figura 34. Figura 34 – Definição do nome do produto. Fonte: Figura elaborada pelo autor. 9 “The right name captures the imagination and connects with the people want to reach” (Weeler, 2009, p.20, tradução nossa)
  54. 54. 54 Identidade visual: Tendo em vista que o projeto será um aplicativo para smartphone, entende-se que a maior parte da comunicação visual será feita em dis- positivos digitais, porem é possível que os praticantes do esporte colem adesivos de marcas que se identificam em seus skate. Pensando nisto, foi desenvolvido uma identidade visual em forma de emblema que, segundo Wheeler (2009), é quando o nome da empresa está intrissecamente vinculado a um elemento pictórico. Na Figu- ra 35 é apresentado a proposta final para a identidade visual do produto. Figura 35 – Resultado final da assinatura visual do produto. Fonte: Figura elaborada pelo autor. A cultura do skate está muito ligada com a linguagem visual do grafite10 . Le- vando essa informação em consideração para o logotipo, foi feito um lettering a par- tir de um esboço feito à mão e após finalizado em um programa vetorial. A partir da conclusão do logotipo definiu-se o elemento de apoio que ajudaria a construir o emblema para a identidade visual. O elemento escolhido foi o círculo, por ser uma forma geométrica básica de fácil reconhecimento e boa aplicação, tanto para o ícone do aplicativo quanto para adesivos de divulgação da marca a serem colados no skate dos usuários. 10 “[...] Nome dado às inscrições feitas em paredes, desde o Império Romano. Considera- se grafite uma inscrição caligrafada ou um desenho pintado ou gravado sobre um suporte que não é normalmente previsto para esta finalidade (WIKIPÉDIA, 2015). Disponível em: <http://pt.wikipedia.org/wiki/Grafito>. Acesso em 14 de jun. de 2015 “
  55. 55. 55 A cor definida para identidade visual foi o roxo, por ser uma cor jovial que está associada à criatividade (CORTES, 2003), aspecto que relaciona-se fortemente com a prática do skate, a qual demanda criatividade, tanto para realizar manobras assim como para encontrar e transpor obstáculos. 5.5.2 Editoração e diagramação Para a distribuição dos elementos na tela foram utilizadas as diretrizes deter- minadas pelo Google, a partir das quais se configura uma malha de um módulo qua- drado de 8px, tendo como base a resolução de 640x320px assim como representa- do na Figura 36. Figura 36 – Malha diagramacional do aplicativo. Fonte: Figura elaborada pelo autor.
  56. 56. 56 5.5.3 Definição das fontes tipográficas A fonte escolhida foi a família Roboto (Figura 37) por ser padrão do sistema Android, como é sugerido na guideline11 especifico para sobre tipografia no site do Material Design. Seus pontos fortes são que a fonte possui uma família completa e foi projetada para ser usada em ambientes digitais com diferentes resoluções de te- las. Figura 37 – Fonte tipográfica definida para o aplicativo. Fonte: Figura elaborada pelo autor. 5.5.4 Definição da imagética Além dos conteúdos em vídeo gerados pelos usuários, foi definida para o aplicativo uma família iconográfica, que são elementos auxiliam na comunicação do produto com os usuários. Na guideline do Material Design existe uma família de íco-nes padrões do Android, porém para o presente projeto definiu-se criar determina-dos ícones onde suas percepções fossem contextualizadas com o público-alvo do produto, os skatistas. Um exemplo de ícone criado especialmente para o projeto foi para funcionalidade classificação. 11 Disponível em: < http://www.google.com/design/spec/style/typography.html#typography-language- categorization>. Acesso em 5 mai. 2015.
  57. 57. 57 Segundo Crumlish e Malone (2009) os usuários estão sempre consumindo, lendo e experimentando conteúdos que lhes são apresentados. Com isso, os usuá- rios possuem vontade de contribuir e expressar sua opinião perante a rede. Os auto- res complementam que este comportamento deve ser explorado quando: • O usuário quiser ter rapidamente a opinião de um usuário para um deter- minado conteúdo. • O usuário quiser estimular o envolvimento dos usuário na comunidade. • As opiniões polarizadas são mais recomendadas para a classificação geral do objeto. Umas das formas mais populares de aplicar essa funcionalidade é dividir a classificação por positiva ou negativa. Em alguns exemplos já utilizados no mercado os usuários podem classificar desta forma: gostei (não gostei), polegar para cima (polegar para baixo), coração (coração partido). Para o presente projeto optou-se em definir os termos para classificação com conteúdos que tenham sinergia com o pú- blico-alvo do aplicativo. Assim, estabeleceu-se que para classificação positiva será utilizado um pictograma representativo de uma mão com o dedo indicador e o míni- mo para cima, este gesto é muito utilizado pelos skatistas para expressar felicidade e aprovação. No vocabulário utilizado pelos praticantes do esporte, aquele skatista que não é muito habilidoso é chamado de "prego". A partir dessa informação definiu- se que o pictograma que irá representar a classificação "não gostei" será um prego. O processo criativo para a definição do ícone representativo da funcionalidade "não gostei" é demonstrado na Figura 38. Figura 38 – Estágios criativos para o ícone “não gostei”. Fonte: Figura elaborada pelo autor.
  58. 58. 58 Já na Figura 39, é possível visualizar a família iconográfica completa. Figura 39 – Família iconográfica do aplicativo. Fonte: Figura elaborada pelo autor. 5.5.5 Definição da matriz cromática A matriz cromática do aplicativo terá como base o padrão definido para a identidade visual da marca, o roxo. Para ajudar na comunicação do aplicativo foram definidas cores auxiliares. A matriz cromática do produto é apresentado na Figura 40.
  59. 59. 59 Figura 40 - Matriz cromática do aplicativo. Fonte: Figura elaborada pelo autor. 5.6 DIFERENCIAÇÃO A etapa de diferenciação tem como objetivo medir a eficiência das caracterís- ticas gráficas projetadas para o produto na etapa de identidade. Meurer (2015) suge- re o uso do método chamado “mapeamento de expressões”. O método consiste em dividir um quadro em quadrantes a partir do cruzamento de um linha vertical (X) e outra horizontal (Y). Com isso, são estipulados pares de palavras com diferentes valores e inseridas nas extremidades dos eixos. Para o projeto aqui proposto foram definidas as palavras formal/divertido para o eixo X e minimalista/complexo para o eixo Y. Mais um vez recorreu-se a ferramenta do Typeform para criar um formulário12 com questões sobre o projeto aqui proposto e mais três similares (Riders, OnFlow e Nike SB). A partir dos resultados obtidos com a pesquisa montou-se a matriz apre- sentada na Figura 41. 12 Link para o fomulário: https://brunobquadros.typeform.com/to/cRdX56
  60. 60. 60 Figura 41- Mapeamento de expressões Fonte: Figura elaborada pelo autor. Pôde-se perceber que o projeto aqui proposto ficou nivelado com os aplicati- vos Nike Sb e Riders no quesito de minimalismo e destacou-se no como o aplicativo com a linguagem gráfica mais divertida. Essa informação ganha extrema relevância ao considerar que o tema do aplicativo está ligado ao lazer de seus usuários que, em sua maioria, são jovens entre 16 a 30 anos de idade. 5.7 DESENVOLVIMENTO A etapa de desenvolvimento consiste na execução de todas telas do produto levando em consideração a demanda de requisitos, restrições e possibilidades defi- nidas na etapa de Verificação. Além da demanda de Verificação, o designer deve ser seguir as diretrizes de layout definidas na etapa de Reconstrução (MEURER, 2015). A seguir apresenta-se as principais telas do aplicativo (Figura 42). Logo após algumas das funcionalidades mais relevantes do aplicativo são detalhadas.
  61. 61. 61 Figura 42 – Principais telas do aplicativo Wall tricks Fonte: Figura elaborada pelo autor. Criação de conta: Não será necessário criar conta para usar o aplicativo. Po- rém, é importante para produto que o usuário possua uma conta para conseguir sa- ber quais são suas preferências e hábitos. Com isso, é possível realizar uma entrega de conteúdo inteligente e personalizada para cada usuário. A estratégia utilizada para converter um visitante em um usuário registrado foi deixar visíveis todas as funcionalidades do aplicativo, mas algumas destas funciona-
  62. 62. 62 lidades são bloqueadas. Quando o usuário tentar utilizar alguma funcionalidade blo- queada o sistema apresentará um pop-up convidando-o a criar uma conta (Figura 43). Figura 43 – Criação de conta: pop-up de conversão. Fonte: Figura elaborada pelo autor. Captura de vídeos: Na Figura 44 é apresentado o fluxo de telas desde o re- gistro de uma manobras realizada até a sua publicação na rede.
  63. 63. 63 Figura 44 - Captura em vídeo e publicação de uma manobra Fonte: Figura elaborada pelo autor.
  64. 64. 64 6 CONSIDERAÇÕES FINAIS O presente estudo buscou o desenvolvimento de uma proposta de um aplica- tivo para smartphone direcionado ao segmento esportivo do skate para viabilizar o registro e o compartilhamento de vídeos de manobras de praticantes do esporte no formato de rede social. A partir de pesquisa realizada com 100 praticantes de skate para caracterização do público-alvo pôde-se identificar que o perfil de usuários com- preende especialmente jovens com idades entre 16 a 30 anos (68%), do sexo mas- culino (94%), que andam de skate pelo menos três vezes na semana (60%). Ainda foi possível levantar as informações de que a maioria possui smartphone (95%, sen- do 57% deles dispositivos Android) e o utilizam para registrar vídeos de manobras (73%) e compartilhá-las em redes sociais (61%). Tal caracterização oportunizou, além de delimitar o público do projeto, a constatação de que o conteúdo gerado pe- los praticantes encontra-se fragmentado em diversas redes sociais. Desta forma, configura-se um cenário de dúvida aos usuários a respeito de qual o melhor lugar para compartilhar esse tipo de conteúdo e, portanto, uma demanda concentrada. Para entender melhor o cenário atual, foi realizada uma análise de similares e referências já atuantes no mercado. Com isso, foram levantadas informações pri- mordiais para definir o escopo do projeto. Desde o seu início, o desenvolvimento do produto foi pensado a partir da função de interação mais básica proposta, o registro do vídeo de manobras, seguido da forma que o usuário poderá compartilhar o con- teúdo com outros usuários da rede. Isto tudo resultou em um produto mínimo viável (MVP). Eric Ries (2011) defende que o objetivo de um MVP é testar hipóteses rele- vantes relacionadas ao negócio do produto. Trata-se da uma forma ágil de gerar um ciclo de desenvolvimento, no qual se constrói uma versão enxuta do produto, colo- cando-o no mercado pra mensurar seu impacto e aprender com os feedbacks dos usuários o mais rápido possível e, assim, reiniciar o ciclo. Deste modo, entende-se que o presente estudo apresenta um produto com potencialidades para o mercado, apresentando os requisitos mínimos para sua fun- cionalidade, entendendo que seu próprio teste com o público-alvo poderá auxiliar em seu aprimoramento. Sugere-se que sejam desenvolvidas novas etapas a fim de tes- tar a validade das propostas e ressalta-se a importância de colocar o MVP à prova no mercado para verificar a aceitação do produto perante seu público-alvo. Ainda,
  65. 65. 65 faz-se importante coletar feedbacks para aprimorar o produto em um processo con- tínuo, assim como a testagem de formas de monetização para o serviço, a partir da inserção de formatos de publicidade de marcas do segmento dentro do produto. Deste modo, destaca-se a necessidade de continuidade de esforços para tornar viá- vel a consolidação do produto, apresentando soluções atrativas para suprir as de- mandas do mercado.
  66. 66. 66 REFERÊNCIAS BONSIEPE, G. (Coord.). Metodologia experimental: desenho industrial. Brasília: CNPq, 1984. BROD J., M.. Engenharia de Produção Inclusiva: A Linguagem Gráfico-Verbal, Gráfico-Visual e Gesto-Visual para Atividades de Produção. Tese (Doutorado em Engenharia de Produção) – Programa de Pós-Graduação em Engenharia de Produção, Universidade Federal do Rio Grande do Sul, Porto Alegre, 2009. CORTES, C. Color in Motion Thesis for the Master of Fine Arts Computer Graphics Design Rochester Institute of Technology, 2003 Disponível em: < http://www.mariaclaudiacortes.com/colors/Colors.html>. Acesso em 15 de jun de 2015. CRUMLISH, C. & MALONE, E. Designing Social Interfaces. 1nd ed. Sebastopol: O’Reilly Media, 2009. GARRETT, J. J.. The Elements of User Experience. New York, NY – USA: AIGA – American Institute of Graphic Arts, 2003. GOMES, L. A. V. N.. Criatividade e design: um livro de desenho industrial para projeto de produto. Porto Alegre: sCHDs, 2011. LÖBACH, B. Desgin Industrial. Bases para a configuração dos produtos industriais. São Paulo: Editora Blucher, 2007. MARTIN, B & HANINGTON, B Universal Methods of Design: 100 ways to Research Complex Problems, Develop Innovative Ideas, and Design Efferctive Solutions. Rio de Janeiro: Rockport Publisher, 2012. MEURER, H. Ferramenta de Gerenciamento e Recomendação como Recurso na Aprendizagem Baseada em Projetos em Design. Porto Alegre RS: Tese (Doutorado) - UFRGS - CEINTEC PPGIE, 2015. NIELSEN, J. Ten Usability Heuristics for Interface Design. 1995. Disponível em: <http://www.nngroup.com/articles/ten-usability-heuristics/ >. Acesso em: 3 mai. 2015. RIES, E. The Lean Startup. New York: Crown Business, 2011. WANGENHEIM, G. V. C & BORGATTO, F. A. MATCH – Measuring Usability of Touchscreen Phone Applications. Disponível em: < http://www.gqs.ufsc.br/match- measuring-usability-of-touchscreen-phone-applications/>. Acesso em 30 de abr. de 2015. WHEELER, A. Design brand identity: an essential guide for the entire branding team. 3. Ed. Hoboken: John Wiley & Sons, 2009
  67. 67. 67 APÊNDICE – GERAÇÃO DE ALTERNATIVAS Estudo do cartão de vídeo.
  68. 68. 68 Estudos de interface
  69. 69. 69 Estudos para identidade visual
  70. 70. 70 ANEXO A – MATCH – CHECKLIST PARA AVALIAÇÃO DA USABILIDADE DE APLICATIVOS PARA CELULAR TOUCHSCREEN
  71. 71. 71
  72. 72. 72
  73. 73. 73
  74. 74. 74
  75. 75. 75
  76. 76. 76
  77. 77. 77
  78. 78. 78

×