Wireframe como ferramenta de visualização de conteúdo - Consultoria em UX - Lab3i
Marcello Rosauro
Em 2006, o chef de cozinha David Hertz deixou sua posição em um restaurante paulista para ensinar jovens da periferia a cozinhar em sua própria cozinha, e sem cobrar nada por isso. O que começou como um sonho arriscado de um indivíduo acabou se transformando no que a Gastromotiva é hoje.
Esse sonho acabou gerando o primeiro projeto social que usaria a gastronomia como ferramenta capaz de promover educação, empregabilidade e geração de renda. A primeira iniciativa foi o Curso de Capacitação em Cozinha. Até hoje o curso atende jovens de 17 a 35 anos, com renda familiar de até 3 salários mínimos, sem qualificação profissional, porém com alto potencial e em busca de oportunidades de trabalho. De 2007 até o final desse ano formará mais de 2033 pessoas em São Paulo, Rio, Salvador, Curitiba e Cidade do México. Atingindo um índice de 80% de empregabilidade, no decorrer de um ano após o término do curso.
fonte: site gastromotiva ( http://www.gastromotiva.org/pb/historico/) acessado em 28/02/2018.
O LAB3i foi acionado para analisar o site atual e sugerir melhorias quanto a experiência de uso do mesmo. Os representantes Matheus e Mariana da Gastromotiva vieram à ESPM e em reunião foi solicitado uma análise do site atual e sugestões para uma melhor performance quanto ao uso e atualização de conteúdo. Estavam presentes na reunião os pesquisadores Eliana Formiga, Leonardo Marques e Marcello Rosauro. A análise foi realizada pelo pesquisador Marcello Rosauro ao longo da primeira semana de janeiro.
Após análise do site, foi concluído que existe uma quantidade desnecessária de páginas. O menu principal está segmentado em seis itens: INSTITUCIONAL, GASTRONOMIA SOCIAL ,PROJETOS, PARTICIPE, PARCEIROS e CONTATO.
O item INSTITUCIONAL do menu apresenta submenus
A GASTROMOTIVA, EXPANSÃO INTERNACIONAL, NOVIDADES DA GASTROMOTIVA, HISTÓRICO e A EQUIPE. Foi notado que a maioria dos itens poderiam constar em uma única página uma vez que o conteúdo referente a cada subitem não é extenso. Foi notado também que o subitem NOVIDADES DA GASTROMOTIVA poderia constar no menu principal uma vez que apresenta informações recentes que merecem maior destaque. Os subitens podem ser acessados em uma única página através do mesmo menu principal usando a técnica de ancoragem, promovendo agilidade no acesso ao conteúdo.
O mesmo ocorre com o segundo item do menu segmentado nos subitens O MOVIMENTO, REDE GASTRONÔMICA e REDE MUNDIAL. Foi detectado que no mapa existente no subitem REDE MUNDIAL não constam as sedes brasileiras.
O item PROJETOS apresenta as atividades e cursos oferecidos pela Gastromotiva. Foi notada a importância desse item uma vez que apresenta descrição das atividades. Os subitens do menu são: CURSO DE CAPACITAÇÃO, EMPREENDEDORES, SUPER LIGA, REFETTORIO GASTROMOTIVA e CURSO GASTRONOMIA NOS PRESÍDIOS. Sugere-se colocar esse item no menu principal como o primeiro, uma vez que está diretamente relacionado a captação de novos membros.
O item PARTICIPE do menu principal foi discutido na reunião com os membros da Gastromotiva e representa um item crítico do site. O site tem como uma das finalidades captar doadores, alunos e voluntários. Essa ação de captação está presente topo da página principal, onde constam três botões . Sugere-se dar maior ênfase a esses botões.
A imagem em destaque no primeiro scroll da página principal pode reforçar essa ação
através de imagens de alto impacto e um texto informativo sobre os benefícios de tornar-se um membro da Gastromotiva em cada setor (aluno, voluntário e doador) somado
a um botão “call to action”.
Os itens PARCEIROS e CONTATO não interferem na navegação e podem ser mantidos nos locais respectivos.
Foi detectado também que as imagens em destaque nas páginas do site apresentam as pessoas participantes na sua maioria. Em alguns casos (ex.: NOvidades Gastromotiva) a imagem é um muro com uma ilustração do tipo graffitti de um pizzaiolo. Sugere-se que ao invés de imagens de muro, comunidade, etc. possam ser apresentados pratos realizados na Gastromotiva, promovendo assim o principal serviço da empresa.
A estrutura do site segue padrão Wordpress que deve ser mantido por conta da agilidade e facilidade no seu uso.
Após análise e recomendações sugeridas foi realizada uma nova reunião, dessa vez na sede da Gastromotiva na Lapa - Rio de Janeiro. As sugestões foram bem recebidas pelos integrantes Matheus e Mariana, os mesmos que estiveram na ESPM no primeiro encontro. Foram apresentadas as deficiências notadas na análise e concluiu-se que as alterações não exercem grande impacto no site no que diz respeito ao aspecto técnico. O custo das alterações será mínimo e isso é uma grande vantagem uma vez que a Gastromotiva trabalha com desenvolvedores parceiros.
Foi combinado com Matheus e Mariana que, como estão previstas alterações também no conteúdo do site, os responsáveis irão fazer uma análise e possível redução do conteúdo e após essa revisão e produção do novo conteúdo será realizado um novo encontro para distribuir o conteúdo em um novo mapa do site a ser apresentado aos desenvolvedors
para implementação.
A partir da primeira análise e documentação da mesma realizada na fase I do projeto de consultoria do site Gastromotiva, foi solicitada uma reunião na sede da empresa. A Reunião foi realizada em 21 de maio de 2018 com o responsáveis pela empresa Matheus e Mariana.
(foto: acervo do pesquisador )
A principal finalidade de reunião foi esclarecer qualquer dúvida sobre o relatório da primeira análise do site atual e definição de novas propostas para o novo site. O pesquisador do Lab3I Marcello Rosauro apresentou outra proposta de navegação que foi de imediato aceita pelos responsáveis pela Gastromotiva por reduzir a quantidade de páginas e por conseguinte reduzir o fluxo de navegação até chegar no objetivo final e otimizar custo de produção e manutenção do novo site. A nova proposta foi apresentada oralmente e, a partir de desenhos esquemáticos do conceito de navegação apresentado a proposta foi compreendida e assumida como útil para o projeto.
Os desenhos esquemáticos partiram do método de wireframe, onde são apresentados segmentos de conteúdo por página otimizando a visualização do conteúdo como um todo e em partes. Foram realizados wireframes no âmbito macro com a finalidade apenas de apresentar a nova hierarquia do site e suas implicações quanto ao fluxo de navegação.
Primeiro desenho esquemático apresentando o método de
visualização via wireframes.
Uma vez compreendido o método, o pesquisador Marcello Rosauro apresentou a proposta de redução de conteúdo sem alterar a configuração do menu principal anterior. Essa postura foi adotada com a finalidade de minimizar a curva de aprendizado do usuário final. Os itens do menu principal serão mantidos mas os links foram agrupados reduzindo significativamente a quantidade de páginas.
No site anterior, cada item do menu (incluindo submenus) direcionava a uma única página por item. Como pode ser percebido no desenho abaixo:
Observando o esquema acima pode-se contar 18 (dezoito) páginas. Somando-se ainda as páginas de PARCEIROS e CONTATO, o site atual consta de 20 (vinte) páginas no total. Ao longo da reunião foi proposto pelo pesquisador do Lab3i um número menor de páginas agrupadas por conteúdo e suas relações conceituais. Nesse ponto foram discutidas as relações entre o itens apresentados no site atual e o agrupamento de páginas foi realizado em conjunto com os responsáveis pela Gastromotiva. Uma série de desenhos esquemáticos foram realizados para melhor visualizar os agrupamentos e foi concluído que o novo site pode apresentar o conteúdo em um total de 6 (seis) páginas para o site principal e sendo previstas mais 3 (três) páginas, sendo 2 (duas) para a Gastromotiva internacional e uma “ Landing Page” para eventuais promoções sazonais.
Exemplos de wireframes realizados para definição de conteúdo.
Uma vez concluída a fase de definição de conteúdo por página, foi feita uma revisão do site como um todo corroborando a melhoria no fluxo de navegação e redução do custo de produção e menutenção. O pesquisador do Lab3i, com os desenhos realizados na reunião, refez os mesmos usando software de edição vetorial tornando-os ainda mais fáceis de serem compreendidos e posteriormente usados na produção dos layouts do site. O conjunto de wireframes (vistos nas imagens a seguir) foi reenviado à Gastomotiva para serem reavaliados e apresentados aos desenvolvedores com o intuito de facilitar o orçamento do site final. O wireframe foi validado pela Gastromotiva e posteriormente enviado aos desenvolvedores.
Segue abaixo o conjunto de wireframes.
Em 10 de agosto foi realizada uma nova reunião para análise da interpretação dos wireframes realizada pela empresa HomemMáquina. A empresa foi escolhida pela Gastromotiva para criação e implementração do novo site official. Uma vez validado o conjunto de wireframe. realizado pelo Lab3i, o mesmo foi enviado para e empresa contratada para compreensão do modelo de navegação e formalização do conteúdo da primeira carga do novo site. O pesquisador do Lab3i foi solicitado pela Gastromotiva para validar as propostas sugeridas pela empresa Homem Máquina. O desenho dos wireframes foi refeito incluindo as propostas sugeridas e foi discutido com Matheus e Mariana as alterações e inclusões solicitadas. Aquantidade sugerida anteriormente foi revista e a quantidade de páginas necessárias foi alterada e sua quantidade final ainda está por definir-se.
A discussão mais relevante sobre o conteúdo sugerido pela empresa contratada foi sobre a quantidade de links necessários para a conclusão das doações. A partir do fluxo de navegação partindo da página de abertura (home) foi notado que opara a conclusão final da doação, ou seja, momento que o doador aciona o botão “doar”, deve-se reduzir ao máximo de três cliques ( home>descrição da doação>plataforma de pagamento). Essa discussão também incluiu o seguinte fato: o usuário pode não ter cadastro na plataforma de pagamento obrigando-o a realizar o cadastro antes do pagamento final. A revisão do wireframe realizada pela empres Homem Máquina não alterou de forma significativa o fluxo de navegação proposto pelo Lab3i, comprovando a relevância da participação do laboratório.
Foi sugerido também que, após a implementação do novo site, sejam feitos testes de usabilidade com alunos da ESPM para uma análise crítica da experiência de usuário.
Segue abaixo conjunto de fotografias dos wireframes sugeridos pela Homem Máquina, empresa contratada pela Gastromotiva para desenvolver o site.
Fotos: acervo pessoal do pesquisador Marcello Rosauro.