Instituto Reciclar universidade nove de julho i
TECNOLOGIA EM DESIGN GRAFICO
I
dEBORA DE OLIVEIRA REAL EKATRINE GAROUFALIS bENITES
São Paulo 2017
2
UNIVERSIDADE NOVE DE JULHO TECNOLOGIA EM DESIGN GRÁFICO
Trabalho de Conclusão de Curso apresentado à Universidade Nove de Julho - UNINOVE, como requisito parcial para obtenção do grau de Tecnólogo em Design Gráfico.
DÉBORA REAL EKATRINE GAROUFALIS
São Paulo 2017
3
AGRADECIMENTOS
Primeiramente agradeço aos professores pela paciência em ensinar e por nos mostrar um caminho novo. Um agradecimento em especial aos professores Fábio Hukai, Patrícia Fujita e Jorge Paiva por me ensinarem que devemos refazer os trabalhos quantas vezes forem necessárias para que fique bom, e depois refazer mais umas três vezes para ter certeza. Agradeço à minha família, amigos e namorado por todo o apoio moral e emocional, por me aguentarem reclamando diariamente principalmente o meu namorado que foi o que mais aguentou. Obviamente agradeço a mim mesma, Débora Real por todo o empenho e esforço para a realização deste trabalho e ter consegui do programar um site sem saber e já gostaria de emendar meu agradecimento a todos os tutoriais da internet, sem eles não conseguiria; E por fim e talvez o mais importante, agradeço a minha parceira e amiga Ekatrine Garoufalis, por aguentar meu estresse e mudanças de humor constantes, por não me deixar surtar e desistir de tudo, por todo o empenho e dedicação nos trabalhos, sem ela não teria conseguido realizar metade das atividades. E claro, por todas as balas de canela.
Débora Real
4
A realização deste trabalho não teria sido possível sem a a juda da minha amiga e parceira Débora Real, amigos e familiares pacientes que me incentivaram e, principalmente, me deram todo apoio necessário nessa jornada. Um agradecimento em especial aos professores Fábio Hukai, Patrícia Fujita e Jorge Paiva por me ensinarem o que é dedicação e consistência, sempre me impulsionando a aperfeiçoar meus talentos e a confiar neles. Um agradecimento especial a mim mesma por ter superdo meus medos e inseguranças, pelo empenho e esforço para aprender a mexer nos programas e a todos os tutoriais que a internet pode me proporcionar.
Ekatrine Garoufalis
5
RESUMO Com o crescimento da comunicação na web, a importância da permanência no mercado virtual baseia-se em um website atraente e funcional. Este projeto visa a reconstrução do site da Ong Reciclar, no intuito de desenvolver uma interface que proporcione uma melhor experiência para o usuário. Com base nos estudos de usabilidade, arquitetura da informação (AI) e tendências atuais de web design, foram realizadas pesquisas analíticas no website atual a fim de identificar os problemas relacionados a usabilidade e AI. A partir dos resultados obtidos foi iniciada a produção do redesign do site: pesquisa exploratória qualitativa dos concorrentes diretos e indiretos da Ong. Reestruturamos o mapa de fluxo de navegação do site utilizando-o como base para elaboração de um de wireframe de baixa e alta fidelidade e a realização de teste de Paper Prototype com usuários. Por meio desse processo, concluiu-se que no website atual da ong encontra-se diversos problemas de usabilidade e de AI, fazendo com que a navegação e interação do usuário fique desconexa e cansativa. Palavras-Chave: Arquitetura da Informação, Usabilidade, Webdesign, Redesign, Instituto Reciclar.
6
ABSTRACT With the growth of communication on the web, the importance of staying in the virtual market is based on an attractive and functional website. This project aims at the reconstruction of the Ong Reciclar website, in order to develop an interface that provides a better experience for the user. Based on the studies of usability, information architecture (IA) and current web design trends, analytical research was carried out on the current website to identify the problems related to usability and AI. From the results obtained the production of redesign of the site was started: qualitative exploratory research of the direct and indirect competitors of the Ong. We restructure the navigation flow map of the site using it as the basis for elaborating a low and high fidelity wireframe and performing Paper Prototype testing with users. Through this process, it was concluded that ong’s current website contains several usability and AI issues, making the user’s browsing and interaction disconnected and tiring. Keywords: Information Architecture, Usability, Webdesign, Redesign, Instituto Reciclar
7
LISTA DE FIGURAS 1.Conceito de Mobile First...................................................................................................................................17 2. Flat Design.............................................................................................................................................................18 3. Flat Design – Página.........................................................................................................................................18 4.Flat Design – Ícones...........................................................................................................................................18 5. Material Design...................................................................................................................................................19 6.Efeito Parallax......................................................................................................................................................20 7.Comparação site one page e multi page..............................................................................................20 8. Instituto Reciclar – Homepage...................................................................................................................21 9.Instituto Reciclar – Depoimentos...............................................................................................................22 10.Instituto Reciclar – Parceiros......................................................................................................................22 11. Instituto Reciclar – Boletim..........................................................................................................................23 12.Instituto Reciclar – Notícias.........................................................................................................................23 13. Instituto Reciclar - Sala de Imprensa...................................................................................................24 14. Instituto Reciclar - Homepage (responsivo).....................................................................................24 15. Ong Estação da Luz – Homepage..........................................................................................................25 16. Ong Estação da Luz - Homepage 2.......................................................................................................25 17.Ong Estação da Luz - Layout responsivo.............................................................................................26 18.Ong Estação da Luz - Projetos (esporte).............................................................................................26 19.Ong Estação da Luz - Homepage 3........................................................................................................26 20.Ong Social Bom Jesus – Homepage.....................................................................................................27 21. Ong Social Bom Jesus – Homepage 2.................................................................................................27 22.Ong Social Bom Jesus – Loja...................................................................................................................28 23. Ong Social Bom Jesus – Notícias..........................................................................................................28 24. Ong Social Bom Jesus - Menu (mobile)............................................................................................29 25. Instituto Flor Gentil – Homepage..........................................................................................................30 26. Instituto Flor Gentil – Parceiros..............................................................................................................31 27.Instituto Flor Gentil – Projetos...................................................................................................................31 28. Mapa de fluxo de navegação do site (original).............................................................................32 29. Mapa de fluxo de navegação do site (proposta)..........................................................................33 30. Wireframe baixa fidelidade.....................................................................................................................34 31. Paper Prototype ..............................................................................................................................................35 32. Teste de Paper Prototype - Acessando processo seletivo.........................................................36 33. Teste de Paper Prototype - Página processo seletivo (Inscrições).......................................36 34, Teste de Paper Prototype - Página processo seletivo..................................................................36 35. Teste de Paper Prototype - Página como contribuir......................................................................37 36. Teste de Paper Prototype - Página como contribuir (Opções de contribuição)..............37 37. Teste de Paper Prototype - Página como contribuir (vídeo explicativo)..............................37
8
38. Teste de Paper Prototype - Página galeria (Selecionando álbum)........................................38 39. Teste de Paper Prototype - Página galeria (acessando as imagens)...................................38 40. Teste de Paper Prototype - Blog (assinando newsletter)............................................................39 41. Teste de Paper Prototype - Acessando página contato................................................................39 42. Teste de Paper Prototype - Página contato.......................................................................................40 43. Wireframe alta fidelidade - Homepage...............................................................................................41 44. Wireframe alta fidelidade - História......................................................................................................41 45. Wireframe alta fidelidade - Como Atuamos.....................................................................................42 46. Wireframe alta fidelidade - Galeria......................................................................................................42 47. Wireframe alta fidelidade - Parceiros...................................................................................................42 48. Wireframe alta fidelidade - Processo Seletivo.................................................................................43 49. Wireframe alta fidelidade - Como Contribuir...................................................................................43 50. Wireframe alta fidelidade - Blog.............................................................................................................43 51. Wireframe alta fidelidade - Blog (vídeos)...........................................................................................44 52. Wireframe alta fidelidade - Contato.....................................................................................................44 53. Wireframe alta fidelidade - Menu...........................................................................................................44 54. Homepage Ong Reciclar (versão final desktop).............................................................................46 55. Homepage Ong Reciclar - Como contribuir (versão final desktop).....................................47 56. Rodapé Ong Reciclar (versão final desktop)....................................................................................47 57. Página história - Infográfico (versão final desktop) ......................................................................48 58. Página história 2 - Infográfico (versão final desktop)...................................................................49 59. Página Como Atuamos - Ilustrações (versão final desktop).......................................................50 60. Página Como Atuamos - Informações (versão final desktop)...................................................50 61. Página Como Atuamos - Habilidades (versão final desktop)......................................................50 62. Página Como Atuamos - Informação da ilustração (versão final desktop).........................51 63. Página Como Atuamos - Informação da ilustração (versão final desktop)........................51 64. Página Como Atuamos - Informação da ilustração (versão final desktop)........................51 65. Página Como Atuamos Informação da ilustração (versão final desktop)...........................51 66. Página Galeria (versão final desktop)...................................................................................................52 67. Página Galeria - Depoimentos (versão final desktop)...................................................................53 68. Página parceiros (versão final desktop)...............................................................................................54 69. Página parceiros (versão final desktop)...............................................................................................55 70. Página parceiros (versão final desktop)...............................................................................................55 71. Página Blog e newsletter (versão final desktop)................................................................................56 72. Página Blog - Na midia (versão final desktop)...................................................................................56 73. Página Blog - notícias em tópicos (versão final desktop).............................................................57 74. Página Blog - notícias (versão final desktop)......................................................................................57 75. Página Blog - vídeos(versão final desktop)..........................................................................................57
9
LISTA DE FIGURAS 76. Página Inicial - Como Contribuir (versão final desktop)...............................................................58 77. Página Como Contribuir - Video animado indicado tipos de contribuição (versão final desktop)...................................59 78. Página Como Contribuir - Ìcones de contribuição (versão final desktop)....................................................................................60 79. Página Como Contribuir - Ìcones de contribuição e informações (versão final desktop).....................................................61 80. Página Processo Seletivo (versão final desktop).......................................................................................................................................62 81. Página Processo Seletivo - Infográfico (versão final desktop).............................................................................................................63 82. Página Contato - Formulário (versão final desktop).................................................................................................................................64 83. Página Contato - Localização (versão final desktop)..............................................................................................................................65 84. Homepage - (versão mobile)...............................................................................................................................................................................67 85. Homepage - Como Contribuir (versão mobile)..........................................................................................................................................67 86. Menu responsivo (versão mobile)......................................................................................................................................................................67 87. Menu responsivo(versão mobile)........................................................................................................................................................................67 88. Página Como Atuamos (versão mobile).........................................................................................................................................................68 89. Página Como Atuamos - Ilustração (versão mobile)................................................................................................................................68 90. Página Como Atuamos - Ilustrações informativa (versão mobile)....................................................................................................68 91. Página Como Atuamos - Descrição da ilustração (versão mobile)....................................................................................................68 92. Página Como Atuamos -Descrição da ilustração (versão mobile).....................................................................................................69 93. Página Como Atuamos - Descrição da ilustração (versão mobile)...................................................................................................69 94. Página Como Atuamos - Descrição da ilustração (versão mobile)...................................................................................................69 95. Página Como Contribuir - (versão mobile)...................................................................................................................................................70 96. Página Como Contribuir - (versão mobile)..................................................................................................................................................70 97. Página Como Contribuir - (versão mobile)...................................................................................................................................................70 98. Página parceiros - (versão mobile)...................................................................................................................................................................71 99. Página Parceiros - (versão mobile)...................................................................................................................................................................71 100. Página História - (versão mobile).....................................................................................................................................................................71 101. Página História - (versão mobile)......................................................................................................................................................................71 102. Página Blog - newsletter - (versão mobile)..................................................................................................................................................72 103. Página Blog - notícias - (versão mobile).......................................................................................................................................................72 104. Página Blog - na mídia - (versão mobile).....................................................................................................................................................72 105. Página Blog - vídeos - (versão mobile)........................................................................................................................................................72 106. Página Galeria - (versão mobile)....................................................................................................................................................................73 107. Página Galeria - (versão mobile)....................................................................................................................................................................73 108. Página Contato - Formulário - (versão mobile).........................................................................................................................................73 109. Página Contato - Localização - (versão mobile).......................................................................................................................................73 110. Processo Seletivo - Infográfico explicativo (versão mobile)................................................................................................................74 111. Processo Seletivo - Infográfico explicativo(versão mobile)................................................................................................................. 74
10
SUMÁRIO Introdução • Introdução.........................................................................................................................12 • Objetivo Geral.................................................................................................................13 • Objetivos Específicos..................................................................................................13 • Justificativa......................................................................................................................13 Capítulo 1 | Revisão Bibliográfica 1. Design digital.................................................................................................................14 2. Arquitetura da informação.....................................................................................15 3. Usabilidade....................................................................................................................16 4. Tendências de webdesign......................................................................................16 • Mobile First......................................................................................................................17 • Flat Design.......................................................................................................................18 • Material design..............................................................................................................19 • Efeito parallax...............................................................................................................20 • One page........................................................................................................................20 Capítulo 2 | Pesquisa Exploratória e Levantamento dos requisitos 1. Análise do website [ong].........................................................................................21 • Pesquisa de campo: Análise da concorrência..............................................25 • Concorrentes diretos [pontos positivos e negativos]..............................25 • Concorrente direto A.................................................................................................25 • Concorrente direto B.................................................................................................27 2. Concorrentes indiretos [pontos positivos e negativos]........................30 • Concorrente indireto A............................................................................................30 Capítulo 3 | Projeto da Interface de Website para Ong • Mapa de fluxo de navegação [original e proposta]..................................32 • Interface em wireframe de baixa fidelidade................................................34 • Paper Prototype [com imagens].........................................................................35 • Wireframe digital de alta fidelidade [UXPIN]...............................................41 • Website final - Desktop...........................................................................................45 • Website final - Mobile...............................................................................................66 Capitulo 4 | Considerações finais e Referências • Conclusão........................................................................................................................75 • Referências bibliográficas.......................................................................................76 11
INTRODUÇÃO Instituto Reciclar é uma organização sem fins lucrativos fundada em 1995 que tem como objetivo proporcionar aos jovens em situação de vulnerabilidade social oportunidades de educação complementar à escola e aprendizado profissional. Nos anos 2015/16, o instituto passou por uma reformulação. E em março/2017 ao invés da Oficina de Reciclagem, os jovens passaram a ter uma vivência mais completa, onde desenvolvem projetos sociais estimulando a criatividade, apoio para as escolhas profissionais e construção de carreira, cursos técnicos totalmente custeados pelo Reciclar e encaminhamento profissional. Com todo esse histórico, a ONG Reciclar vem crescendo e a judando cada vez mais os jovens da região de Jaguaré, no entanto muitas pessoas e futuros doadores ainda podem não conhecer seus valores e ideais por conta da uma divulgação ineficiente na web. Atualmente a comunicação e divulgação gira em torno da internet. E para que as empresas se destaquem e permaneçam no mercado virtual, é necessário um bom planejamento para um conteúdo web atraente e funcional. Para a construção de um bom site, é importante apoiar-se em fundamentos da Arquitetura de Informação, isto é, colocar as informações em ordem. Os conteúdos devem estar bem estruturados visando à experiência do usuário, uma plataforma com arquitetura equilibrada, textos objetivos. É importante que a construção do site tenha sido pensada nas sensações que causam no usuário, pensar em que tipo de imagem será inserida, cores a serem utilizadas, links, compartilhamento de conteúdo em redes sociais e páginas que se adaptam em tablets e smartphones. Na prática, podemos perceber que muitos websites não têm esses estudos, como é no caso da ONG Reciclar, nos estudos realizados, foram constatadas algumas falhas quando se trata de usabilidade e praticidade, tornando a navegação mais exaustiva e desconexa. Há muitas informações em excesso e repetitivas, tanto nas páginas, quanto nos menus. Não há interação direta com as redes sociais, ocorre muita oscilação de tipografia, cores que não combinam e que não foram pensadas de acordo com as sensações que causam abertura de novas janelas desnecessárias, não possui mecanismo de busca e há imagens desfocadas e mal redimensionadas. Logo, deduzimos que não houve uma preocupação com a Arquitetura da Informação. 12
OBJETIVO GERAL Baseado nessas informações, esse projeto visa resolver esses problemas de usabilidade, diante de um redesign completo do site. Desenvolvendo-o com uma interface mais atual, e totalmente pensada no usuário.
OBJETIVOS ESPECÍFÍCOS Perante os problemas apresentados e após a definição do objetivo geral, foram determinados os seguintes objetivos específicos: - Inserção dos objetivos da ONG na página inicial; - Criação de infográficos a fim de organizar estruturalmente algumas informações; - Elaborar um blog institucional, com a finalidade de divulgação de notícias, vídeos, imprensa. Podendo então diminuir o excesso de conteúdo do site e dar mais visibilidade ao mecanismo de busca do Google. - Modificar hiperlinks e downloads para não precisar abrir uma nova janela no navegador e simplificar o acesso do conteúdo; - Alteração das cores principais do site, no entanto ainda seguiria as cores do logo; - Produzir imagens com alta qualidade.
JUSTIFICATIVA A importância da comunicação na web está no que ela pode proporcionar para uma instituição, como: visibilidade de marca, serviços, produtos, aproximação de novos clientes e fidelizar os existentes. É com base nisto que se estabelece, portanto, a necessidade do redesign do site, tendo em vista, o aumento do alcance da ONG Reciclar pretendendo atrair as pessoas para conhecer e tornarem-se parte desse projeto, seja participando dos serviços oferecidos, ou colaborando com doações.
13
CAPÍTULO 1 | REVISÃO BIBLIOGRÁFICA DESIGN DIGITAL Ao longo da história, o homem sempre buscou transmitir mensagens. E para isso utilizava diversos meios como: as antigas pinturas rupestres, ferramentas físicas, entre outros. Como indivíduos nosso universo mental e cultural depende dos símbolos. No conjunto social, todo o comportamento humano se baseia no uso deles. [...] Toda a civilização existe em função dos símbolos que cria, e o que permanece ao longo da história são também os símbolos que vão mudando segundo as necessidades sociais de cada época. (ROYO, 2011, p.48).
Com o passar dos anos, a comunicação desenvolveu-se e com ela a necessidade de novos recursos. Sendo um deles a tecnologia que se tornou o principal meio de transmitir informação. O design digital surgiu como uma resposta a essa necessidade de se obter informação, aprofundando-se na comunicação visual onde o foco principal é o usuário, procurando desenvolver soluções para a interação homem-máquina de forma legível e compreensiva contribuindo para a evolução da comunicação. Royo (2011, p. 49) afirma que: “A história do design digital é a história da interface do usuário. Em cada meio de comunicação existia uma superfície onde o leitor ou o usuário lia ou usava a informação: uma interface.”.
14
ARQUITETURA DA INFORMAÇÃO A arquitetura de informação (AI) pode ser descrita como uma forma de estruturar e organizar websites e aplicativos a partir de estudos de usabilidade, pensando em esclarecer as informações para os diversos tipos de usuários. Camargo e Viddotti (2011, p.4) afirmam que: “A arquitetura da informação, além de auxiliar na estruturação dos ambientes digitais, deve viabilizar os processos de gestão em geral, principalmente da gestão da informação e do conhecimento.” Conforme o crescimento da internet, e a utilização contínua dos usuários a Arquitetura da informação se tornou indispensável para o desenvolvimento de uma boa plataforma de navegação, pois o principal foco das empresas atuais é o usuário. Desta forma é importante destacar que devido a amplitude de serviços oferecidos via websites e o crescimento usuários moveis, a usabilidade da interface deve atender a necessidade do usuário fazendo com que um website sem uma boa arquitetura pode tornar a navegação difícil e causar pouca permanência do usuário no website. A importância no uso da AI para a produção de um website, consiste em a judar o usuário a entender o que se passa na tela de seu computador ou smartphone, a encontrar o que se procura, e saber aonde está e de onde veio. A definição encontrada no Information Architeture Institute, sintetiza esta importância: “Se você já tentou usar algo e pensou: “onde eu deveria ir em seguida?” Ou “isso não faz sentido”, você está encontrando um problema com uma arquitetura de informação. ” Há três pilares básicos para uma prática efetiva de AI: usuário, conteúdo e o contexto. O profissional arquiteto da informação, deve entender as necessidades e comportamento de usuários, do contexto envolvido e do conteúdo em si. Ou seja, retratar todo o processo desde o levantamento de requisitos, até a fase de testes e manutenção. Com base nessas informações, Camargo e Viddoti (2011, p.32) consideram: “O profissional arquiteto da informação deve projetar ambientes informacionais digitais, abordando o tratamento funcional, estrutural, informacional, navegacional e visual do ambiente a fim de organizar, estruturar e representar os objetos de conteúdo. ”
15
USABILIDADE Com o avanço tecnológico e o surgimento de novas mídias digitais, é imprescindível a rápida absorção das informações. E para isso o design projetado para a interface deve ser de fácil entendimento. A usabilidade está relacionada à uma boa relação de comunicação entre o usuário e o software em um determinado contexto. A Organização Internacional para a Padronização (ISO), apresenta duas definições de usabilidade: “Usabilidade refere-se à capacidade de um software ser compreendido, aprendido, utilizado e ser atraente para o usuário, em condições específicas de uso”. “Usabilidade é a efetividade, eficiência e satisfação com que um produto permite atender aos objetivos específicos e usuários específicos em um contexto de uso específico”. Somando essas definições, conclui-se que para o desenvolvimento de interfaces digitais, devem-se aplicar os conceitos de usabilidade que depende desses fatores: Do usuário: que deve reconhecer e entender o conteúdo apresentado; Do conteúdo: que deve ser claro e objetivo facilitando o entendimento.
TENDÊNCIAS DE WEB DESIGN O mundo do web design evolui constantemente, surgindo sempre novas tendências. Com essas mudanças frequentes, algumas são deixadas de lado, outras continuam em alta e até mesmo tendências passadas são trazidas de volta à tona. Estamos na era dos dispositivos móveis, tudo está ao alcance de nossas mãos. As empresas cada vez mais estão focando em layouts responsivos para que estes funcionem tanto nos desktops e principalmente nos smartphones.
16
MOBILE FIRST É um conceito que caracteriza o desenvolvimento do projeto primeiramente para os dispositivos mobile e depois para os desktops. Essa técnica vem se popularizando devido à grande quantidade de smartphones presentes na sociedade.
1. Conceito de Mobile First
Mesmo com a grande expansão do uso dos smartphones, algumas empresas ainda não utilizam desse conceito. O principal empecilho é a dificuldade para adaptar um site desktop em uma tela pequena, porém, o problema não está no dispositivo mobile e sim no excesso de informações existentes em sites para computadores. Ao projetar um site em dispositivos mobile, nós temos cerca de 80 de menos espaço do que temos comparando aos desktops. Por conta disso, temos que eliminar muitas informações que não sejam relevantes para tornar o site funcional. Por este motivo que os estudos das necessidades dos usuários tornam-se indispensáveis. A metodologia Mobile First, criada por Luke Wroblewski é otimizar o site desktop, projetando-o primeiro para os smartphones. Trabalhando com esse conceito, automaticamente iremos reduzir os conteúdos do site de forma que o mesmo fique apenas funcional sem elementos em excesso que podem fazer com que o usuário perca o interesse.
17
FLAT DESIGN O flat design é a simplicidade dos elementos na página. Um layout que se distingue por suas formas cleans e planas sem variações, gradientes, relevos, etc. É um conceito bastante utilizado para facilitar a interação dos usuários. Por exemplo: telas planas, formas geométricas simples, poucos elementos na tela, fazendo com que a interface seja mais prática e fácil de usar.
2. Flat Design
3. Flat Design - Página
4.Flat Design - Ícones
18
MATERIAL DESIGN Criado pela Google, essa linguagem veio como uma repaginação do flat design. Um design ao mesmo tempo minimalista e multidimensional. A simplicidade permanece, porém, os usuários agora podem se beneficiar de ferramentas mais intuitivas e dinâmicas, como animações discretas, profundidade, etc. O objetivo do Material Design é unificar o visual do Android com os aplicativos do Chrome OS e das páginas da internet a fim de padronizar a experiência dos usuários em todas as plataformas.
5. Material Design
19
OUTRAS TENDÊNCIAS PARA 2017 PARALLAX É uma técnica que cria um efeito 3D em um ambiente 2D usando o movimento da tela. O conceito utiliza a possibilidade de mover as imagens em um plano de fundo, fazendo com que o site pareça ter certa profundidade. A técnica é vista na rolagem da página (quando o usuário rola a página para baixo), por isso é bastante vista em sites onepage. O parallax pode ser um efeito bastante bonito, mas seu uso em excesso pode prejudicar o carregamento do site.
6. Efeito Parallax
ONEPAGE Ao falarmos sobre o Parallax, outra tendência veio à tona: Sites de uma única página que são conhecidos como onepage. Nessa técnica, todas as informações principais ficam na “primeira página”, ou seja, antes da primeira rolagem do website. Uma das principais características dessa tendência é a velocidade com que o site carrega, não existem atrasos, pois conforme o usuário rola a tela as informações vão aparecendo. E nessa era de dispositivos mobile, a rapidez é essencial. 7. Comparação site one page e multi page
20
CAPÍTULO 2 | PESQUISA EXPLORATÓRIA E LEVANTAMENTO DOS REQUISITOS ANÁLISE DO WEBSITE [ONG] Fundada em 1995 o instituto reciclar, tem como objetivo quebrar o ciclo de exclusão social dos jovens de uma comunidade de São Paulo. Proporcionando educação complementar à escola, aprendizado profissional e social. Iniciando as atividades com a oficina de reciclagem de papel, capacitando os jovens para o mercado de trabalho. E nos anos 2015/16 o instituto passou por uma reformulação, dando aos jovens mais oportunidades de se desenvolverem pessoalmente, socialmente e profissionalmente. O foco do instituto é o desenvolvimento pessoal, profissional e social dos jovens, por meio de projetos sociais estimulando a criatividade, cursos técnicos, encaminhamento para o mercado de trabalho e apoio profissional para a construção de carreira.
Analisando o site, percebemos alguns problemas. Na página home (imagem 8) os elementos gráficos estão muito grandes, o logo do instituto está espremido. Há uma variação grande de tipografia.
8. Instituto Reciclar - Homepage
21
Na página depoimentos (imagem 9), o excesso de cores causa certo incômodo. E na página: parceiros (imagem 10), as informações estão mal distribuídas causando confusão na leitura.
10.Instituto Reciclar - Parceiros
9.Instituto Reciclar - Depoimentos
22
Algumas páginas do website estão com excesso de cores e de informação. Alguns elementos não estão bem destacados, como é o caso da página notícias (imagem 12), O boletim está mal posicionado sendo difícil encontrá-lo e quando clicamos, somos direcionados à uma nova janela. Numa navegação no celular isso dificulta o acesso.
12. Instituto Reciclar - Notícias
11. Instituto Reciclar - Boletim
23
O site não é bem programado para a versão responsiva. O menu fica muito pequeno, as imagens cortadas. Enquanto os textos ficam grandes. A página fica sem uma hierarquia e dificulta o acesso em dispositivos mobile.
Não há galeria no site, para acessar as fotos do instituto, é necessário fazer download. Muitas vezes os usuários estão no celular ou em algum computador público, sendo uma dificuldade para realizar downloads.
14. Instituto Reciclar - Homepage (responsivo) 13. Instituto Reciclar - Sala de Imprensa
24
PESQUISA DE CAMPO: ANÁLISE DA CONCORRÊNCIA Concorrentes diretos, pontos positivos e negativos
2. Concorrente direto A O primeiro concorrente direto é a Ong Estação da Luz, que realiza trabalhos sociais com crianças e jovens por meio de cultura, educação e esporte. A Ong visa alcançar com seus projetos: crianças, jovens e adultos em situações de vulnerabilidade social. E com as informações retratadas no site, pretende atrair novos investidores formando parcerias. Após a an álise do site, temos como pontos positivos: Fácil navegação, as informações contidas no site correspondem aos menus e são fáceis de localizar.
15. Ong Estação da Luz – Homepage
A paleta principal de cores utilizada condiz com o logo. Textos de fácil entendimento. Funcionalidade do site, ele não travou em nenhum momento dos testes realizados. E como pontos negativos: A home contêm informações em excesso, imagens muito grandes que cortam os textos contidos nelas.
16. Ong Estação da Luz - Homepage 2
25
PONTOS NEGATIVOS No layout responsivo o redimensionamento das informações não foi realizado da forma correta, a tipografia na imagem atrapalha na leitura do título da página.
Oscilação nos alinhamentos dos textos.
18.Ong Estação da Luz - Projetos (esporte)
Não há interação direta com redes sociais. Espaços em branco.
19.Ong Estação da Luz - Homepage 3
17 .Ong Estação da Luz - Layout responsivo
26
3. Concorrente direto B
O segundo concorrente direto é a Ong Social Bom Jesus, lá são realizadas medidas socioeducativas para diversos públicos, visando à quebra da exclusão social.
20. Ong Social Bom Jesus – Homepage
PONTOS POSITIVOS Qualidade das imagens. Equilíbrio visual. Padronização de cores e elementos gráficos. Padronização de tipos. Textos otimizados para celular legíveis.
21. Ong Social Bom Jesus – Homepage 2
27
PONTOS NEGATIVOS
Links que não funcionam.
Informações vagas, sempre precisando clicar em "saiba mais" ou baixar arquivos.
Busca não funciona corretamente. Páginas incompletas.
23. Ong Social Bom Jesus - Notícias
22. Ong Social Bom Jesus – Loja
28
Na versĂŁo responsiva o menu abre e fecha sozinho, ficando impossĂvel navegar
24. Ong Social Bom Jesus - Menu (mobile)
29
CONCORRETES INDIRETOS [PONTOS POSITIVOS E NEGATIVOS 1. Concorrente indireto A A concorrente indireta é o Instituto Flor Gentil, que visa promover a sustentabilidade utilizando a reciclagem de flores descartadas para montagem de arranjos que são doados para casas de repouso, casamentos comunitários e outros projetos e eventos sociais.
25. Instituto Flor Gentil - Homepage
30
Após a análise do site temos como pontos positivos: Página com um visual "clean", sem informações em excesso. As fotos do site são de ótima qualidade, utilizando de técnicas de foco, deixando em destaque as flores. Não é cansativo navegar pelo site. Os links e redirecionamentos funcionam corretamente. No smartphone o site funciona corretamente. 26. Instituto Flor Gentil - Parceiros
Pontos negativos: Não haver nenhuma informação da instituição na página principal, fazendo com que o usuário tenha que procurar um pouco. Haver poucas informações sobre os projetos realizados.
27.Instituto Flor Gentil - Projetos
31
CAPÍTULO 3 | PROJETO DA INTERFACE DE WEBSITE PARA ONG MAPA DE FLUXO DE NAVEGAÇÃO (ORIGINAL E PROPOSTA)
28. Mapa de fluxo de navegação do site (original)
Note que o site atualmente está muito sobrecarregado, com informações repetidas e sendo por muitas vezes necessário percorrer um grande caminho para acessar determinada página.
32
A nossa proposta foi deixar o site mais objetivo possível, para que o usuário não perca o interesse ao navegar.
29. Mapa de fluxo de navegação do site (proposta)
33
INTERFACE EM WIREFRAME DE BAIXA FIDELIDADE
30. Wireframe baixa fidelidade
Na etapa de planejamento do website, os protótipos são de suma importância para avaliação dos recursos utilizados e possíveis interações. Foram usados neste projeto, dois tipos de protótipos: Wireframe de baixa e alta fidelidade. O wireframe de baixa fidelidade, é como se fosse um rascunho feito à mão, usando papel, lápis, canetas. É uma maneira superficial de passar a ideia do projeto, ele visa de forma simples como seriam as páginas do website, e algumas interações sem muita preocupação com o design. 34
TESTE DE PAPER PROTOTYPE [COM IMAGENS] Para o desenvolvimento de um sistema/site, é muito importante realizar todos os testes necessários para que no momento da codificação não ha ja dúvidas quanto a usabilidade do mesmo. O Paper Prototype é uma forma de realizar esses testes com usuários que não fazem parte do processo de elaboração do site, a fim de identificar problemas de usabilidade.
O teste foi realizado com seis pessoas na faixa etária entre 20 a 26 anos, sendo quatro mulheres e dois homens. E foi solicitado cinco tarefas, são elas: 1. Inscrever-se no processo seletivo; 2. Fazer uma contribuição; 3. Acessar a galeria; 4. Inscrever-se no newsletter do blog; 5. Entrar em contato.
31. Paper Prototype
35
A primeira tarefa era se inscrever no processo seletivo, os passos a seguir era: Acessar o menu, na aba “FAÇA PARTE” clicar em “PROCESSO SELETIVO”, e na página PROCESSO SELETIVO selecionar a opção “INSCRIÇÕES”.
32. Teste de Paper Prototype - Acessando processo seletivo
33,Teste de Paper Prototype - Página processo seletivo (inscrições)
34. Teste de Paper Prototype - Página processo seletivo
36
A segunda tarefa era fazer uma contribuição, os passos a seguir era: Acessar o menu, aba “FAÇA PARTE” clicar em “COMO CONTRIBUIR”. Nesta página há um vídeo explicando as formas de contribuição e as opções com as descrições necessárias.
36. Teste de Paper Prototype Página como contribuir (Opções de contribuição)
35. Teste de Paper Prototype - Página como contribuir
37. Teste de Paper Prototype Página como contribuir (vídeo explicativo)
37
A terceira tarefa era fazer acessar a galeria, os passos a seguir era: Acessar o menu, aba “INSTITUCIONAL” clicar em “GALERIA”. Na página galeria, selecionar o álbum desejado.
38 . Teste de Paper Prototype - Página galeria (Selecionando álbum)
39. Teste de Paper Prototype - Página galeria (acessando as imagens)
38
A quarta tarefa era inscrever-se no newsletter do blog, os passos a seguir era: Acessar o menu, aba “BLOG”. Na página do blog, há um campo para preenchimento do e-mail para realizar a assinatura.
40. Teste de Paper Prototype - Blog (assinando newsletter)
A quinta e última tarefa era entrar em contato, os passos a seguir era: Acessar o menu, aba “CONTATO”. Na página contém um formulário para envio, telefones e a localização da ong.
41. Teste de Paper Prototype Acessando página contato
39
42. Teste de Paper Prototype - Página contato
Após a realização dos testes foi constatado os seguintes problemas: Encontrar a página “Processo Seletivo”; As formas de contribuição estavam confusas; Ter que ficar acessando o menu sempre para entrar nas páginas. As soluções que serão tomadas para a resolução dos problemas serão: Especificar melhor a localização da página “Processo Seletivo”, colocando um link na home do site; Melhorar os símbolos de contribuição, colocando ilustrações claras sobre as formas de contribuir; Trabalhar nos links entre uma página e outra, para não ter que ficar acessando o menu sempre.
40
WIREFRAME DIGITAL DE ALTA FIDELIDADE [UXPIN] O wireframe de alta fidelidade, já possui uma representação mais próxima possível do que será o projeto final. É possível simular todo o fluxo de navegação, com interações, tipografia, imagens, cores, etc. A parte visual fica bem próximo do layout final. Nesse caso foi utilizada a ferramenta UXPin, para criar o layout responsivo.
43 . Wireframe alta fidelidade - Homepage
44. Wireframe alta fidelidade - História
41
WIREFRAME DIGITAL DE ALTA FIDELIDADE [UXPIN]
45. Wireframe alta fidelidade Como Atuamos
46. Wireframe alta fidelidade Galeria
47. Wireframe alta fidelidade Parceiros
42
WIREFRAME DIGITAL DE ALTA FIDELIDADE [UXPIN]
48. Wireframe alta fidelidade Processo Seletivo
49. Wireframe alta fidelidade Como Contribuir
50. Wireframe alta fidelidade Blog
43
WIREFRAME DIGITAL DE ALTA FIDELIDADE [UXPIN]
51. Wireframe alta fidelidade Blog (Videos)
52. Wireframe alta fidelidade Contato
53. Wireframe alta fidelidade Menu
44
WEBSITE FINAL - DESKTOP
45
HOMEPAGE DESKTOP
54. Homepage Ong Reciclar (versão final desktop)
Na homepage foi utilizado ilustrações abstratas que representam os jovens da ong. As cores são tons pasteis com objetivo de não incomodar o usuária na visualização da página.
46
55. Homepage Ong Reciclar - Como contribuir (versão final desktop)
56. Roda pé Ong Reciclar - (versão final desktop)
47
PÁGINA - HISTÓRIA DA ONG
57. Página história - Infográfico (versão final desktop)
48
58. Pรกgina histรณria 2 - Infogrรกfico (versรฃo final desktop)
49
PÁGINA - COMO ATUAMOS
59. Página Como Atuamos - Ilustrações (versão final desktop)
60. Página Como Atuamos - Informações (versão final desktop)
61. Página Como Atuamos Habilidades (versão final desktop)
50
62. Página Como Atuamos Informação da ilustração (versão final desktop)
63. Página Como Atuamos Informação da ilustração (versão final desktop)
65. Página Como Atuamos Informação da ilustração (versão final desktop)
64. Página Como Atuamos Informação da ilustração (versão final desktop)
51
PÁGINA - GALERIA DE FOTOS
66. Página Galeria (versão final desktop)
52
67. PĂĄgina Galeria - Depoimentos (versĂŁo final desktop)
53
PÁGINA - PARCEIROS
68. Página parceiros (versão final desktop)
54
69. Página parceiros (versão final desktop)
70. Página parceiros (versão final desktop)
55
BLOG DA ONG RECICLAR
71. Página Blog e newsletter (versão final desktop)
72. Página Blog - Na midia (versão final desktop)
56
73. Página Blog - notícias em tópicos (versão final desktop)
74. Página Blog - notícias (versão final desktop)
75. Página Blog - Videos (versão final desktop)
57
PÁGINA - COMO CONTRIBUIR
76. Página Como Contribuir (versão final desktop)
58
77. Página Como Contribuir - Video animado indicado tipos de contribuição (versão final desktop)
59
PÁGINA - COMO CONTRIBUIR
78. Página Como Contribuir - Ìcones de contribuição (versão final desktop)
60
79. Página Como Contribuir - Ìcones de contribuição e informações (versão final desktop)
61
PÁGINA - PROCESSO SELETIVO
80. Página Processo Seletivo (versão final desktop)
62
81. Pรกgina Processo Seletivo - Infogrรกfico(versรฃo final desktop)
63
PÁGINA - CONTATO
82. Página Contato - Formulário (versão final desktop)
64
83. Página Contato - Localização (versão final desktop)
65
WEBSITE FINAL - MOBILE
66
HOMEPAGE / MENU
84. Homepage - (vers達o mobile)
85. Homepage - Como Contribuir (vers達o mobile)
86. Menu responsivo (vers達o mobile)
87. Menu responsivo (vers達o mobile)
67
PÁGINA - COMO ATUAMOS
88. Página Como Atuamos (versão mobile)
89. Página Como Atuamos Ilustração (versão mobile)
90. Página Como Atuamos Ilustrações informativa (versão mobile)
91. Página Como Atuamos Descrição da ilustração (versão mobile)
68
COMO ATUAMOS
92. Página Como Atuamos Descrição da ilustração (versão mobile)
93. Página Como Atuamos Descrição da ilustração (versão mobile)
94 . Página Como Atuamos Descrição da ilustração (versão mobile)
69
PÁGINA - COMO CONTRIBUIR
95. Página Como Contribuir (versão mobile)
96. Página Como Contribuir (versão mobile)
97. Página Como Contribuir (versão mobile)
70
PÁGINA - PARCEIROS E HISTÓRIA
98. Página parceiros (versão mobile)
99. Página Parceiros (versão mobile)
100. Página História (versão mobile)
101. Página História (versão mobile)
71
PÁGINA - BLOG
102. Página Blog - newsletter (versão mobile)
103. Página Blog - notícias (versão mobile)
104. Página Blog - na mídia (versão mobile)
105. Página Blog - vídeos (versão mobile)
72
PÁGINA - GALERIA E CONTATO
106. Página Galeria (versão mobile)
107. Página Galeria - fotos (versão mobile)
108. Página Contato - formulario (versão mobile)
109. Página Contato - Localização (versão mobile)
73
PÁGINA - PROCESSO SELETIVO
110. Processo Seletivo Infográfico explicativo (versão mobile)
111. Processo Seletivo Infográfico explicativo (versão mobile)
74
CONCLUSÃO
Neste projeto tínhamos como objetivo desenvolver um novo site para o Instituto Reciclar, onde foi embasado em cima dos seguintes temas: Arquitetura da informação, Design UX/UI. Com base nesses estudos podemos analisar o mapa de fluxo do site, onde encontramos diversos problemas de navegação. Cumprimos todos os objetivos que tínhamos proposto, no qual seria um site de fácil navegação, responsivo (para as pessoas acessarem com mais facilidade em seus smartphones) e com um visual clean para não causar incômodo visual, levando o usuário permanecer mais tempo no site. Na finalização do site compreendemos que é necessário dar a maior importância a comunicação visual, pois ela pode proporcionar melhor visibilidade para instituição e aproximação do usuário.
75
REFERÊNCIAS BIBLIOGRÁFICAS
76
Novas Tendências do Web Design em 2017 que Você Precisa Conhecer: Wix, 2017. Disponível em: < https://pt.wix.com/blog/2017/01/novas-tendencias-do-web- design-em-2017-que-voce-precisa-conhecer/> Acesso em: 27. Set. 2017. De Volta ao Flat: 10 Dicas Para Criar Um Site Belíssimo Com Flat Design: Wix, 2016. Disponível em:< https://pt.wix.com/blog/2016/04/de-volta-ao-flat-10-dicas-para- criar-um-site-belissimo-com-flat-design/> Acesso em: 27. Set. 2017. Material Design: Wikipedia. Disponível em: < https://pt.wikipedia.org/wiki/Material_Design> Acesso em: 27. Set. 2017 CASTELLI, Ian. Material Design: um olhar aprofundado sobre o novo estilo visual da Google: Tec Mundo, 2014. Disponível em:< https://www.tecmundo.com.br/google/58278-material-design-olhar-aprofundado- novo-estilo-visual-google.htm> Acesso em: 27. Set. 2017. ARTY, David. Design responsivo: o que é e porque ele é importante para o seu projeto: Designimador, 2017. Disponível em:< https://www.tecmundo.com.br/google/58278-material-design-olhar-aprofundado- novo-estilo-visual-google.htm> Acesso em: 27. Set. 2017. Tendências de Webdesign Para 2017: Labbo, 2016. Disponível em:< https://www.labbo.com. br/blog/tendencias-de-webdesign-para-2017/> Acesso em: 27. Set. 2017. VIEIRA, Leandro. O conceito e aplicabilidade do Mobile First: Apikiblog, 2016. Disponível em:< https://blog.apiki.com/2016/06/24/mobile-first-o-conceito-e-sua- aplicabilidade/> Acesso em: 27. Set. 2017. Y AMASHIRO, Agata. A Nova Tendência do Flat Design. O que? Por que?: Des1gnon, 2013. Disponível em:< https://blog.apiki.com/2016/06/24/mobile-first-o- conceito-e-suaaplicabilidade/> Acesso em: 28. Set. 2017. What is Information Architeture?: The Information Architeture Institute. Disponível em:< https://www.iainstitute.org/what-is-ia> Acesso em: 20. Set. 2017. ROYO, Javier. Design Digital. 1. ed. São Paulo: Rosari, 2011. 77
CAMARGO, Liriane Soares de Araújo; VIDOTTI, Silvana Aparecida Borsetti Gregorio; Arquitetura da Informação: Uma abordagem prática para o tratamento de conteúdo e interface em ambientes informacionais digitais. 1.ed. Rio de Janeiro: LTC, 2011. SANTA ROSA, José Guilherme; PINHO, Andre Luis Santos de; CARVALHO, Caio Vitoriano de Nunes e; GUSMÃO, Eduardo Henrique Olímpio de; SALES JÚNIOR, Francisco Monteiro de; FONSECA JÚNIOR, José Nivaldo; MAIA, Maria Aniolly Queiroz. ARQUITETURA DA INFORMAÇÃO E USABILIDADE: ANÁLISE DO PROCESSO DE CADASTRO DE AUTOR E SUBMISSÃO DE UM ARTIGO NO PERIÓDICO ELETRÔNICO BIBLIOCANTO DA UFRN, p. 1127-1138. Disponível em <: Anais do 15 Ergodesign & Usihc [=Blucher Design Proceedings, vol. 2, num. 1]. São Paulo: Blucher, 2015. http://pdf.blucher.com.br.s3-sa-east- 1.amazonaws. com/designproceedings/15ergodesign/97-U127.pdf>. Acesso em: 20. Set. 2017. SILVA, Ailton Santos. Design e Arquitetura da Informação para Websites Educacionais: Um Estudo de Usabilidade 2007. 170 f. (Doutorado em Design e Arquitetura) – Faculdade de Arquitetura da Universidade de São Paulo, São Paulo, 2007. SILVA, Ailton Santos. Arquitetura da Informação: Porque Arquitetura da Informação é tão Importante. Ambiente Virtual de Aprendizagem, 2017. Disponível em:< Ambiente Virtual de Aprendizagem – Universidade Nove de Julho> Acesso em: 20. Set. 2017. SILVA, Ailton Santos. Arquitetura da Informação: Histórico Sobre AI. Ambiente Virtual de Aprendizagem, 2017. Disponível em:< Ambiente Virtual de Aprendizagem – Universidade Nove de Julho> Acesso em: 20. Set. 2017. AGNI, Eduardo. Mobile First (ou boas razões para investir em Mobile): Ux.blog, 2015. Disponível em:< https://uxdesign.blog.br/mobile-first-ou-boas-raz C3 B5es- para-investir-em-mobile-94defd3100e8 /> Acesso em: 03. Out. 2017. CERPA, Aimée. 5 vantagens de sites one page: Agência Trampo. Disponível em:< https:// agenciatrampo.com.br/5-vantagens-de-sites-one-page/> Acesso em: 03. Out. 2017. Efeito Parallax: Como e por que utilizar essa técnica em seu site: Academia UOL Host, 2017. Disponível em: <http://uolhost.uol.com.br/academia/noticias/tecnologia/2017/03/06/efeito-parallax- como-e-por-que-utilizar-essa-tecnica-em-seu-site.html#rmcl/> Acesso em: 03. Out. 2017.
78
Instituto Reciclar. Disponível em: < http://www.reciclar.org.br/pt >Acesso em: 27. Out. 2017. Estação da Luz. Disponível em: < http://www.estacaoluz.org.br/> Acesso em: 27. Out. 2017. Instituto Flor Gentil. Disponível em: < http://www.florgentil.com.br/> Acesso em: 27. Out. 2017. Ong Social Bom Jesus. Disponível em: < http://socialbomjesus.org.br/> Acesso em: 27. Out. 2017. Boy Coy. Disponível em: < http://boy-coy.com/#home/> Acesso em: 14. Nov. 2017.
79