Análise de dados

Ambos os sites atendiam o objetivo de postagem dos desenhos e comunicação de eventos. Contudo, a navegação e usabilidade deixam o usuário confuso e utilizando mais tempo do que o ideal para encontrar mais informações sobre os Grupos. Segundo a usabilidade de KRUG (2008, p. 67), as barras de pesquisa de ambos falham. A primeira por abrir uma outra tela e explicar o uso com a frase indicando o uso da tecla “enter”. A segunda por não estar localizada em local ideal para um usuário, em qualquer que seja sua experiência com a web, encontrar. Observando essas questões, uma prioridade estabelecida foi localizar melhor a busca na execução deste projeto. Além disso, foram simplificados os menus e estudados para uma forma clara de demonstração da localização do usuário nas páginas.

De acordo com as respostas e dados coletados junto ao Grupo, evidenciou-se a necessidade de adição de uma sessão para parceiros à lâmina de Divulgação e a presença de alguma referência ao Blog de TAKEUCHI (2018) que acompanha a história do Grupo. Com nova configuração disposta conforme Figura 15:

Figura 15 – Lâmina com foco em Divulgação - versão final. Fonte: Autoria própria.

3.2.5 Criatividade

Para apresentar os desenhos do Grupo em tamanho maior que o dos websites similares, e para que o usuário possa apreciá-los com mais detalhes, optou-se pelo layout widescreen ou full, os quais compreendem na utilização de todo o espaço do navegador para a disposição das informações. Como explica o blog de marketing canadense Gilmedia em seu artigo “Should you

go Boxed or Full?” (s/a) (“Devo usar tela cheia ou encaixotada?” tradução

Figura 16 – Boxed ou Wide.

Fonte: Materialize css (Acesso em 2018).

Outro ponto positivo da disposição widescreen (ver Figura 16, comparativo entre o formato Boxed e Full) é a relação entre a quantidade de informações e a rolagem da página. Dessa forma, utiliza-se melhor o espaço do layout sem as faixas vazias em volta da “caixa” é possível apresentar maior número de informações sem a necessidade de rolagem frequente. Além da opção widescreen, foi escolhido também criar o layout de forma responsiva, assim como explica o artigo do SEBRAE “O que é um site responsivo?” (s/a), que o layout se adapta à monitores e dispositivos diferentes, reorganizando- se a cada resolução para que as informações se ajustem ao espaço existente.

Segundo o IBGE em 2015, 92,1% dos lares brasileiros acessaram a internet via telefone celular, portanto, é essencial que a plataforma do Grupo seja responsiva.

Na página inicial (Figura 17) os fundos e bordas do layout foram feitos brancos para dar áreas de respiro em volta da grande quantidade de imagens e cores presentes nas ilustrações. As áreas de respiro, são descansos para os olhos e úteis quando há grande quantidade de informação presentes num espaço limitado. Para garantir também, o foco nas informações mais relevantes, chamando atenção dos olhos para as informações presentes nas telas de forma separada, como explica FERNANDES (2015, p.52). Todo o foco da criação está em mostrar as produções do Grupo, começando pelo banner já no início da página, com uma ilustração em destaque, e a possibilidade de aumentar a visualização de todas as imagens na sessão abaixo pelas categorias das produções.

A fonte selecionada foi a Lato, disponível no Google fonts de forma gratuita, em suas variações de peso exemplificadas na Figura 21, pesos da fonte Lato para dar destaque à algumas informações. Essa fonte foi escolhida por ser sem serifa, demonstrado na Figura 22, comparativo entre a fonte Garamond com serifa e a Lato sem serifa, assim, apresenta uma forma mais linear e uniforme para ser utilizada na web.

No banner foi determinada uma área destinada para o nome do autor da obra e data de execução, a fim de valorizar o artista em questão, e auxiliar a identificação do evento pelo usuário no uso da busca. Uma sessão abaixo dessa área foi colocada para dar destaque ao livro de GODOY (2017), sobre o registro de Curitiba pelo Grupo. Como forma de valorizar os croquiseiros e exaltar a obra que também fez parte do projeto de conclusão de curso da autora.

Figura 17 – Geração de alternativa nº3 Fonte: Autoria própria.

conhecerem um pouco mais sobre os participantes e técnicas livres aplicadas. Sendo dividida por categorias, o usuário pode selecionar entre "Arquitetura", "Eventos", "Exposições", "Pessoas", e demais categorias que futuramente o grupo julgar necessária. Há também a opção de visualizar todas as categorias sem distinção para facilitar a visualização mais ampla das ilustrações. Caso o usuário passe o mouse por cima de um desenho duas opções deverão aparecer: um ícone de lupa indicando que pode ser visualizada maior a imagem e outro de sinal de “mais” para acessar todos os desenhos do mesmo evento retratado.

Abaixo das ilustrações, abrem-se três blocos de informações de "O que é?", "Como Participar?" e "Como apoiar ou patrocinar?", tendo cada bloco um botão para acessar a informação completa de cada tópico. Esses três assuntos foram escolhidos por serem partes do objetivo do site: divulgar à comunidade o que é o Grupo e como participar, assim como, chamar atenção para apoios e patrocínios.

Já no rodapé, um campo para cadastro do mailing vem em primeiro lugar, seguido da marca definida pelos croquiseiros e uma sessão com acesso rápido às notícias recentes relacionadas. O mailing, é uma ferramenta de captação de e-mails para que em uma ferramenta de disparo de e-mails de forma única para todos os endereços eletrônicos as novidades, eventos, notícias e o que mais julgarem necessário aos interessados e assinantes tomarem conhecimento. Já a repetição da marca se faz necessária no rodapé, por reforçar a identidade do coletivo de desenhistas e chamar atenção para a posse da plataforma. O acesso rápido de notícias, permite aos membros do grupo a disponibilização rápida de links para matérias e notas relativas aos membros em outros meios de comunicação, como jornais e revistas eletrônicos, vídeos e matérias exaltando a atividade do Grupo Croquis Urbanos Curitiba. Dessa forma, seguindo KRUG (2008, p. 95), a página inicial em seus elementos consegue dar uma ideia geral do conteúdo do site.

3.2.5.1 Paleta cromática

A escolha das cores foi baseada na marca e no padrão visual proposto por GODOY (2017). Utilizou-se o preto e branco ao longo do layout, no menu e textos, com variações em tons de cinza, a fim de destacar os desenhos. Um tom de verde foi escolhido para quebrar a monotonia e, assim, a cor da plataforma se faz através das ilustrações coloridas, valorizando ainda mais os croquis. Nas figuras a seguir apresentam-se o modelo aprovado para a capa do livro de GODOY (2017) e um trecho das páginas internas, expondo a forma de aplicação das cores e diagramação.

Figura 18 – Livro “Um passeio por Curitiba na ponta do lápis”. Fonte: GODOY (2017).

Figura 19 – Trecho do livro “Um passeio por Curitiba na ponta do lápis”. Fonte: GODOY (2017, p.6-7).

Dessa forma, o resultado das cores escolhidas é possível observar na Figura 20 – Paleta de cores criada para o projeto:

Figura 20 – Paleta de cores criada para o projeto. Fonte: Autoria própria.

3.2.5.2 Tipografia

A fonte selecionada foi a Lato, disponível no Google fonts de forma gratuita, em suas variações de peso exemplificadas na Figura 21, pesos da fonte Lato para dar destaque à algumas informações. Essa fonte foi escolhida por ser sem serifa, demonstrado na Figura 22, comparativo entre a fonte Garamond com serifa e a Lato sem serifa, assim, apresenta uma forma mais linear e uniforme para ser utilizada na web.

Figura 21 – Comparativo entre pesos da fonte Lato. Fonte: Autoria própria.

A família de fontes Lato foi criada em 2010 pelo designer Łukasz Dziedzic para um cliente que acabou descartando o uso da mesma para o uso corporativo. Assim, a fonte foi alocada para o domínio público1 _{e tem sido}

amplamente utilizada pelo mundo. Segundo as estatísticas da plataforma

Google fonts (2018), a Lato já está presente em mais de 10 milhões websites

e seu uso mundial tem fatia no Brasil. Na Figura 23 – , apresenta-se alguns caracteres presentes na Lato, utilizando na primeira linha o peso Hairline e seguindo em suas variações até o Black.

Figura 23 – Exemplo de pesos da fonte Lato. Fonte: Autoria própria.

Trata-se de uma fonte sem serifa (ver Figura 22), e seu nome em polonês significa verão.

Os detalhes arredondados dão uma sensação calorosa enquanto a estrutura forte dá estabilidade e seriedade. Masculina e feminina, séria, mas amigável, com sensação de Verão. (DZIEDZIC, 2010)

1 _{Segundo o website JurisWay, o domínio público se dá quando os direitos do autor não mais incidem}

Portanto, a escolha dessa fonte, para um projeto como o do Grupo Croquis Urbanos é harmônica, confere seriedade com a qual os croquiseiros constantemente atuam e a leveza do encanto em ilustrar os lugares e pessoas. Por estar disponível em diversos pesos de espessura nos traçados das letras, torna-se ideal para textos longos por criar uma área agradável, tanto quanto para destaque de títulos (exemplificado na Figura 24 e Figura 25), da “hairline” tão fina quanto um fio de cabelo até a “black” mais robusta e pesada.

Figura 24 – Bloco de texto Lato Light. Fonte: Autoria própria.

Figura 25 – Bloco de texto Lato Regular. Fonte: Autoria própria.

3.2.6 Materiais e tecnologias

Para a criação do Modelo do projeto da plataforma, o desenvolvimento foi dividido em duas partes. O back-end denomina-se à codificação interna de um site ou software, esta orquestra o funcionamento e conduz o comportamento das ferramentas. Já o front-end aplica-se à parte externa, ou seja, aonde será feita a interação com o usuário. Assim como, organiza o estilo visual e de usabilidade.

Dessa maneira, no back-end foi utilizada a linguagem de programação denominada PHP, em conjunto ao banco de dados MySQL, este responsável pelo armazenamento de informações inseridas, como, imagens, textos, identificação dos croquiseiros em suas ilustrações, referência aos fotógrafos em suas produções, além da organização dos croquis em relação as datas e nomes dos eventos. Já, as linguagens empregadas no front-end foram

HTML5, CSS3, JavaScript, estas, deram vida ao layout proposto. Através da

codificação dos elementos de detalhes aplicados, como sombras, transições de imagens, formulários, botões e à navegação. É relevante ressaltar que todas as tecnologias comentadas anteriormente, são livres de licenciamento, não havendo custos para suas aplicações.

No tópico seguinte, são apresentadas as alternativas e linguagem visual criada para o projeto.

3.2.7 Experimentação

Com algumas características já definidas, na etapa de criatividade, as alternativas de layout para a página inicial foram geradas. Tendo como base a afirmação de NIELSEN (2000, p.166), de que a primeira meta da página inicial deve ser definir ao usuário em qual sessão ele se encontra e do que se

trata o site, foram alocados conteúdos em disposições para que já em uma primeira visita todas as informações fundamentais pudessem ser rapidamente acessadas e/ou entendidas. O primeiro layout criado estará presente e comentado a seguir na Figura 26.

Essa, consistiu em colocar no layout todas as informações relevantes em ordem, para que posteriormente fossem ajustadas. Aqui as cores finais ainda não foram totalmente aplicadas. Alguns problemas logo foram identificados: como a devida referência ao autor da obra presente no banner, o espaçamento vertical entre os elementos, espaços em branco sem função de respiro e proximidade das áreas destinadas à exposição dos desenhos. Dessa forma, algumas correções foram feitas já na alternativa nº2 observada na Figura 27.

Figura 27 – Geração de alternativa nº2. Fonte: Autoria própria.

Na alternativa nº2 com os ajustes executados, outros problemas surgiram e com base na obra de NIELSEN (2000, p.126), outros aspectos foram alterados para obter um melhor resultado visual. De acordo com o autor, o fundo ou áreas sem conteúdo devem permanecer neutras e sem texturas, além disso, a quantidade de informação disposta não deve interferir no acesso as informações essenciais. Portanto, na próxima alternativa, uma linha de desenhos foi removida para diminuir a rolagem da página, com a justificativa do uso do botão “ver mais” para acessar abrir mais linhas de croquis na sessão. As cores de fundo do botão e rodapé foram alteradas para o branco, para garantir mais áreas limpas entorno da grande quantidade de informação já presente. Além da padronização de todos os botões para os conciliar o conceito de que todos os botões devem estar claramente identificados como botões.

Outro adicional, foi a reflexão com a obra de KRUG (2008, p.60), que propõe uma navegação intuitiva do menu, bem como a identificação rápida de localização entre as páginas. Para isso, foram adicionadas setas indicativas que existem mais opções no submenu de “O que é” e “Eventos e Encontros”. E com isso, uma linha abaixo do menu principal para indicar em qual sessão o usuário se encontra. Na Figura 28 também é possível observar a palavra “Home” no menu, mesmo sendo esta uma representação da página inicial. Nesta ocasião, a “Home” está ali representada para ilustrar sua presença no futuro, nas páginas internas. Uma vez que NIELSEN (2000) defende a exclusão desse elemento na página inicial por ser redundante. Outra característica adicionada por uso ilustrativo é a aplicação de obras dos croquiseiros, retiradas do grupo fechado do Croquis Urbanos Curitiba no

Facebook. Ali presentes apenas para atestar a capacidade dos desenhos de

Figura 28 – Geração de alternativa nº3. Fonte: Autoria própria.

Outros estudos foram feitos para ilustrar as páginas:

• Sobre: Figura 29 – Página Sobre

• Mapa de encontros: Figura 30 – Página Mapa de Encontros • Memória de Curitiba: Figura 31 – Página Memória de Curitiba • Como participar: Figura 32 – Página Como Participar

• Eventos Anteriores: Figura 33 – Página Eventos Anteriores Além das sessões:

• Registro Fotográfico: Figura 34 – Página Registro Fotográfico • Parceiros e Patrocínios: Figura 35 – Página Parceiros e Patrocínios • Contato: Figura 36 – Página Contato

• Imprensa: Figura 37 – Página Contato de Imprensa

Todas seguindo a linguagem visual criada na página inicial e prevendo blocos de conteúdo simulado para a alocação ao final do projeto. Todas estas foram aplicadas ao modelo disponibilizado online, para a visualização e navegação (https://croquis.herokuapp.com). Apresentadas a seguir:

Figura 29 – Página Sobre. Fonte: Autoria própria.

Figura 31 – Página Memória de Curitiba. Fonte: Autoria própria.

Figura 33 – Página Eventos Anteriores. Fonte: Autoria própria.

Figura 35 – Página Parceiros e Patrocínios. Fonte: Autoria própria.

Figura 36 – Página Contato. Fonte: Autoria própria.

Figura 37 – Página Contato de Imprensa. Fonte: Autoria própria.

Desta forma, ao montar o modelo, este foi apresentado ao Grupo e comunidade para os devidos testes. O link para acesso esteve disponível e indicado na próxima sessão deste trabalho.

3.2.8 Modelo

Foi disponibilizado, um modelo da plataforma via link (https://croquis.herokuapp.com) para visualização e acesso do layout proposto. Com a ressalva, de apresentar apenas a parte gráfica e de navegação do projeto da plataforma. As funcionalidades e ferramentas pretendidas foram descritas no tópico “Desenho Construtivo”.

3.2.9 Verificação

Nesta etapa, o modelo disponibilizado anteriormente foi apresentado aos croquiseiros e a comunidade externa que conhecia ou não o Grupo, para que respondessem um questionário sobre o projeto. Assim, foram identificadas alterações e melhorias possíveis. Deste questionário, criado na plataforma Google Forms, e divulgado em algumas redes sociais, as perguntas mais relevantes para esta etapa, são apresentadas abaixo:

Foi solicitado aos vinte e um respondentes que abrissem o link do modelo simultaneamente ao questionário para a resolução das perguntas. Dessa maneira, o usuário poderia navegar pelo website e ao mesmo tempo responder o que lhe foi requisitado no formulário. Destes, oito eram participantes ativos do Grupo Croquis Urbanos Curitiba, e, demais membros da comunidade externa, dados expostos em detalhes nos anexos deste trabalho.

A pergunta de maior relevância no momento era a que correspondesse a rápida e fácil identificação do assunto do website em um primeiro acesso. No Gráfico 1 pode-se observar que a maioria dos usuários confirmou a identificação do assunto e apenas uma minoria de 9,5%, não conseguiu identificar de imediato. E, no Gráfico 2 demonstra-se que somente 14,3%, o

total de três pessoas, não identificaram que estavam na página inicial do website.

Figura 38 – Gráfico 1 - Identificação imediata de assunto.

Fonte: Autoria própria.

Figura 39 – Gráfico 2 - Identificação de navegação. Fonte: Autoria própria.

Além da navegação, foi verificado, através do questionário, a identificação de informações por ordem de exibição ao longo da página inicial

do website modelo. Por meio das respostas do Gráfico 3, foi possível analisar que a ordem das informações da página não influenciou de forma significativa no reconhecimento dos itens dispostos. Sendo que 61,9% dos respondentes afirmaram encontrar a quarta sessão da página: “o que é; como participar; como apoiar ou patrocinar”, enquanto a segunda sessão “livro de Mariana Godoy” e que deveria ter maior visibilidade por estar no início, obteve apenas 42,9%. Outro fato interessante observado foi o resultado da sessão de “ilustrações lado a lado” pois, ocupam um grande espaço no layout, possuem cores e formas atrativas e mesmo assim resultou em apenas 47,6% das respostas.

Figura 40 – Gráfico 3 - Identificação de conteúdo. Fonte: Autoria própria.

Mais uma vez, pode-se notar um resultado inesperado, neste momento para o questionamento do Gráfico 4. Isso ocorreu ao se comparar o número do gráfico anterior com este. Uma vez que, no Gráfico 3 foi obtida a contagem de 13 pessoas assinalando que identificaram a sessão “o que é; como participar; como apoiar ou patrocinar” e, no Gráfico 4 esse número subiu para 19, totalizando 90,5% dos respondentes.

Figura 41 – Gráfico 4 - Identificação de acesso às informações. Fonte: Autoria própria.

Acredita-se que pode ter ocorrido influência da pergunta anterior nas respostas da subsequente, lembrando que o usuário tinha a liberdade de acessar o website enquanto respondia ao questionário. Contudo, devido a importância dessa sessão os números crescentes foram um resultado positivo para o projeto.

Figura 42 – Gráfico 5 – Facilidade do acesso as informações. Fonte: Autoria própria.

Outros resultados considerados positivos foram os dos Gráficos 5 e 6. Que demonstraram a facilidade em encontrar informações com nenhuma resposta inferior ao nível 3, sendo este regular, e a maioria dos números entre fácil e extremamente fácil no nível 5.

E, a respeito do despertar do interesse dos usuários em saber mais sobre o Grupo Croquis Urbanos Curitiba após navegar no modelo da plataforma, apresentado no Gráfico 6. Apenas 1 respondente julgou não ter interesse nenhum em conhecer mais a respeito dos croquiseiros.

Figura 43 – Gráfico 6 – Sucesso da divulgação. Fonte: Autoria própria.

Além das perguntas, os participantes também tiveram um espaço aberto para sugestões de melhorias para o modelo da plataforma. Em geral, os respondentes comentaram sobre aspectos de funcionalidades e ferramentas que não estavam disponíveis ao uso, apenas visualização. Situação explicada antes da aplicação do questionário. Houveram três comentários a respeito da responsividade do site, quesito que seria implementado apenas na construção do modelo final. Outro, sobre utilizar o menu de navegação de forma fixa ao topo, assim, o menu acompanha a rolagem por todo o site e fica sempre visível. Ainda na página inicial, uma

sugestão produtiva foi a alteração do destino e nome do botão “ver croquis” para a sessão “o que é”. Essa mudança foi pertinente pois, na página inicial já se possui uma galeria de croquis, e a informação “o que é” seria mais relevante para o primeiro acesso de alguém sem conhecimentos a respeito do Grupo.

Quanto sobre a parte gráfica de resposta de botões como os da página “Eventos Anteriores” que quando clicados não mudavam para o símbolo de “menos” ( - ). Isso se deu, por conta da inserção desses botões na ferramenta de organização chamada sanfona que se comporta como uma, abrindo e fechando suas abas para expor ou esconder os conteúdos nelas presentes. Outro comentário relativo à funcionalidade foi a respeito da busca dentro do padrão da sanfona. Uma pessoa julgou impraticável esse modo de pesquisa,