DEPARTAMENTO DE EXPRESSÃO GRÁFICA CURSO DE DESIGN
Carolina Barbosa Russi
DESIGN DO PORTAL LÍNGUAS, LITERATURAS E PRÁTICAS CULTURAIS
Florianópolis 2019
Carolina Barbosa Russi
DESIGN DO PORTAL LÍNGUAS, LITERATURAS E PRÁTICAS CULTURAIS
Projeto de Conclusão do Curso de Graduação Design do Centro de Expressão Gráfica da Universidade Federal de Santa Catarina como requisito para obtenção do Grau de Bacharel em Design.
Orientadora: Profa. Dra. Berenice Santos Gonçalves
Florianópolis 2019
Carolina Barbosa Russi
DESIGN DO PORTAL LÍNGUAS, LITERATURAS E PRÁTICAS CULTURAIS
Este Projeto de Conclusão de Curso (PCC) foi julgado adequado para obtenção do Título de Bacharel em Design e aprovado em sua forma final pelo Curso de Design da Universidade
Federal de Santa Catarina.
Florianópolis, 18 de novembro de 2019.
Profª. Mary Vonni Meürer, Dra. Coordenadora do Curso de Design UFSC
Banca Examinadora:
Prof.ª M.ª Maíra Woloszyn (Universidade Federal de Santa Catarina) M.e Patrick Martinelli Veiga
(
Universidade Federal de Santa Catarina)________________________________ Profª Drª Berenice dos Santos Gonçalves
Universidade Federal de Santa Catarina Berenice Santos
Goncalves:55768032 053
Assinado de forma digital por Berenice Santos
Goncalves:55768032053 Dados: 2019.12.02 15:44:29 -03'00'
Este trabalho é dedicado ao meu avô, maior incentivador da minha educação.
AGRADECIMENTOS
Agradeço à minha mãe, fonte de inspiração diária em todos os âmbitos da minha vida. Sou eternamente grata pelo teu amor, dedicação e suporte. Obrigada por me entender e me apoiar, mesmo quando eu mesma não me entendia.
Agradeço ao meu noivo, que estando extremamente longe ou exatamente do meu lado, me apoiou e me acalmou em todos os momentos de dúvida e ansiedade. Obrigada pela paciência e pelo seu amor e por ser meu parceiro de vida.
Agradeço à Professora Berenice, pela oportunidade de participar deste projeto, pela confiança de desenvolver este trabalho perante tantos envolvidos, e por toda a assistência oferecido ao longo do ano.
Agradeço a todos os meus amigos, que me distraíram e alegraram em momentos de tensão, e choraram comigo pelo estresse de concluir um curso e “virar adulto”. Obrigada por estarem presentes nas horas certas.
RESUMO
Este projeto teve o objetivo de desenvolver o design informacional, de navegação e de interface do Portal Línguas, Literaturas e Práticas Culturais, a partir do envolvimento dos stakeholders inseridos no projeto. A proposta deste portal teve início no contexto do Projeto Institucional de Internacionalização (PrInt) da Coordenação de Aperfeiçoamento de Pessoal de Nível Superior (CAPES). Para a realização do projeto, foi utilizado um método de projeção com abordagem centrada no ser humano, disposto entre as etapas de conhecer, materializar e avaliar. Dentre as técnicas utilizadas, estão entrevistas com público alvo, criação de personas, validação com o usuário e teste de usabilidade. Por fim, foi desenvolvido um protótipo interativo e um guia de estilos para desenvolvimento do projeto.
ABSTRACT
This project aimed to develop the informational, navigation and interface design of the “Portal
Línguas, Literaturas e Práticas Culturais”, based on the involvement of stakeholders in the
project. The proposal of this portal had began at the context of the “Projeto Institucional de
Internacionalização” (PrInt), from “Coordenação de Aperfeiçoamento de Pessoal de Nível Superior” (CAPES). For the realization of the project, a projection method with a
human-centered approach was used, arranged between the steps of “knowing”, “materializing” and “evaluating”. Among the techniques used are interviews with target audience, personas creation, user validation and usability testing. Finally, an interactive prototype and style guide for project development was developed.
LISTA DE FIGURAS
Figura 1 - Representação da metodologia ... 24
Figura 2 - Website Instituto Goethe Brasilien, página principal ... 32
Figura 3 - Website Treccani, página inicial ... 32
Figura 4 - Infográfico de informações retiradas das entrevistas ... 34
Figura 5 - Arquitetura pré-estabelecida com stakeholders ... 39
Figura 6 - Card sorting realizado com participante 1 ... 40
Figura 7 - Card sorting realizado com participante 2 ... 41
Figura 8 - Card sorting realizado com participante 3 ... 41
Figura 9 - Resultado do card sorting realizado com participante 4 ... 42
Figura 10 - Diagrama de arquitetura da informação final ... 42
Figura 11 - Versão 01 do Wireframe da Homepage em desktop ... 44
Figura 12 - Versão 01 do Wireframe da Homepage em mobile ... 45
Figura 13 - Versão 02 do Wireframe da Homepage em desktop ... 46
Figura 14 - Versão 01 do Wireframe da Homepage em mobile ... 47
Figura 15 - Nuvem de palavras retiradas da dinâmica de brainstorm com os stakeholders .... 48
Figura 16 - Painel visual Pluralidade ... 49
Figura 17 - Painel visual Inclusão ... 50
Figura 18 - Painel visual Dinâmico ... 50
Figura 19 - Logotipo da marca Línguas, Literaturas e Práticas Culturais ... 52
Figura 20 – Cores primárias e secundárias ... 53
Figura 21 – Tipografia Montserrat ... 54
Figura 22 – Tela inicial do Portal em plataformas desktop e mobile ... 55
Figura 23 – Página inicial com submenus de “linhas de projeto” ... 56
Figura 24 – Página inicial com submenus de “materiais e mídias”... 57
Figura 25 - Página inicial com submenus de opções de idiomas ... 58
Figura 26 - Página inicial com submenu de acessibilidade em Libras ... 59
Figura 27 - Página inicial com barra de busca ativada ... 60
Figura 28 – Página da linha de projeto “política linguística e discurso” em plataformas desktop e mobile ... 61
Figura 29 – Página do projeto “Cátedra UNESCO em políticas linguísticas para o multilinguismo” em plataformas desktop e mobile ... 62
Figura 31 – Página “materiais pedagógicos” em plataformas desktop e mobile ... 64
Figura 32 – Página “missões” em plataformas desktop e mobile ... 65
Figura 33 – Página missão “University of Massachussetts, Amherst” em plataformas desktop e mobile ... 66
Figura 34 – Página “sobre o Portal” em plataformas desktop e mobile ... 67
Figura 35 – Menu em plataforma mobile ... 68
Figura 36 – Teste com primeiro usuário ... 71
Figura 37 – Teste com terceiro usuário ... 72
Figura 38 – Teste com quarto usuário ... 73
Figura 39 – Compilado dos testes de usabilidade ... 75
Figura 40 – Página inicial com submenus de “linhas de projeto” com alterações ... 78
Figura 41 - Página da linha de projeto “política linguística e discurso” em plataformas desktop e mobile com alterações ... 79
Figura 42 - Página “sobre o Portal” em plataformas desktop e mobile com alterações ... 80
Figura 43 - Página inicial com submenus de “sobre o portal” com alterações ... 81
Figura 44 - Menu em plataforma mobile com alterações ... 82
Figura 45 - Página do projeto “Cátedra UNESCO em políticas linguísticas para o multilinguismo” em plataformas desktop e mobile com alterações ... 83
LISTA DE QUADROS
Quadro 1 – Análise preliminar de similares ... 29 Quadro 2 – Quadro de requisitos ... 37 Quadro 3 - Matriz conceitual - análise dos elementos de cada painel conceitual ... 51
LISTA DE ABREVIATURAS E SIGLAS
CAPES - Coordenação de Aperfeiçoamento de Pessoal de Nível Superior CCE – Centro de Comunicação e Expressão
ICH - Inovação Centrada no Ser Humano MEC – Ministério da Educação
PDI – Plano de Desenvolvimento Institucional PrInt - Projeto Institucional de Internacionalização UFSC – Universidade Federal de Santa Catarina USP – Universidade Federal de São Paulo UX – User Experience (Experiência do usuário)
SUMÁRIO
RESUMO ... 9
ABSTRACT ... 11
LISTA DE FIGURAS ... 13
LISTA DE QUADROS ... 15
LISTA DE ABREVIATURAS E SIGLAS ... 17
SUMÁRIO ... 19 1. INTRODUÇÃO ... 21 1.1. OBJETIVOS ... 22 1.1.1. Objetivo Geral ... 22 1.1.2. Objetivos Específicos ... 22 1.1.3. Justificativa... 22 1.1.4. Delimitação do projeto ... 23 2. METODOLOGIA ... 24 2.1. CONHECER ... 25 2.1.1. Pesquisa preliminar ... 25 2.1.2. Análise de similares ... 25 2.1.3. Entrevistas ... 26 2.1.4. Personas ... 26 2.1.5. Reuniões de validação ... 26 2.2. MATERIALIZAR ... 26 2.2.1. Quadro de requisitos... 26 2.2.2. Card sorting ... 27 2.2.3. Arquitetura da informação ... 27 2.2.4. Wireframe ... 27 2.2.5. Design Visual ... 27 2.3. AVALIAR ... 27 2.3.1. Teste de usabilidade ... 28 3. DIAGNÓSTICO ... 29 3.1. PESQUISA PRELIMINAR ... 29 3.2. ANÁLISE DE SIMILARES ... 31 3.3. ENTREVISTAS ... 33
3.4. PERSONAS ... 35
4. DESENVOLVIMENTO ... 37
4.1. QUADRO DE REQUISITOS ... 37
4.2. ARQUITETURA DA INFORMAÇÃO E CARD SORTING ... 38
4.3. WIREFRAMES ... 43
4.4. DESIGN VISUAL DA INTERFACE ... 48
4.4.1. Logotipo ... 51
4.4.2. Cores... 52
4.4.3. Tipografia ... 53
4.5. APLICAÇÃO DO DESIGN VISUAL ... 54
4.6. TESTE DE USABILIDADE ... 69
4.6.1. Teste Piloto ... 70
4.6.2. Teste com primeiro usuário ... 71
4.6.3. Teste com segundo usuário ... 71
4.6.4. Teste com terceiro usuário ... 72
4.6.5. Teste com quarto usuário ... 73
4.6.6. Teste com quinto usuário ... 73
4.6.7. Teste com sexto usuário ... 74
4.6.8. Teste com sétimo usuário ... 74
4.6.9. Considerações gerais sobre os testes de usabilidade ... 75
4.7. APRESENTAÇÃO DO PROTÓTIPO EM REUNIÃO COM STAKEHOLDERS ... 75
4.8. GUIA DE ESTILO ... 83
5. CONCLUSÃO ... 85
REFERÊNCIAS ... 87
APÊNDICE ... 88
A. RESULTADO DA PESQUISA PRELIMINAR ... 88
B. ENTREVISTAS COM USUÁRIOS ... 90
C. PALAVRAS-CONCEITO ... 94
D. ESBOÇOS DIGITAIS DO LOGOTIPO DO PORTAL ... 95
E. SLIDE APRESENTADOS NA REUNIÃO DE AGOSTO DE 2019 COM STAKEHOLDERS ... 96
F. GUIA DE ESTILO ... 99
ANEXO ... 101
1. INTRODUÇÃO
No contexto atual de universidades globais, em que a troca de conhecimento internacional entre instituições tornou-se intrínseca à realização de pesquisas no meio acadêmico e à formulação de teses de mestrado e doutorado, a internacionalização das universidades brasileiras converte-se de necessidade em inevitabilidade.
Segundo a Universidade Federal de Santa Catarina, universidades do mundo inteiro consideram o processo de internacionalização como um meio de aumentar os índices de excelência em pesquisa e de proporcionar uma formação e capacitação abrangente para a comunidade acadêmica, colaborando para um mundo mais globalizado.
Como uma universidade progressiva e em constante evolução, a UFSC se adequou ao ambiente acadêmico atual e almeja se tornar uma universidade de classe mundial por meio do seu Plano de Desenvolvimento Institucional (2015-2019). Neste documento é apresentado o contexto da implementação da proposta, seus objetivos e ações estratégicas para ampliar a internacionalização das atividades da UFSC.
Como objetivo geral, o PDI visa estabelecer o status de universidade global à UFSC até o ano de 2023, propondo-se a desenvolver a conscientização internacional e intercultural de estudantes, docentes e técnico-administrativos, encorajando e reforçando a pesquisa e produção de conhecimento através de colaborações e parcerias entre instituições internacionais (UFSC, 2018).
A partir deste contexto de internacionalização da universidade, para auxiliar na inclusão da UFSC no cenário global de excelência acadêmica, foi concebido o Projeto Portal Línguas, Literaturas e Práticas Culturais. O projeto foi criado com fomento de relações internacionais no ensino, pesquisa, extensão e gestão universitária e promoção da cooperação com universidades e outros parceiros de várias partes do mundo.
O Portal é um produto digital do projeto que integra pesquisadores dos programas de pós-graduação em Linguística, Literatura e Design, e importantes centros de pesquisa do exterior. Este é um espaço digital onde estarão disponibilizadas de forma organizada, sistematizada e acessível materiais, mídias, documentos e informações sobre as pesquisas, projetos e missões realizadas pelos docentes e discentes participantes das pós-graduações citadas.
Os materiais apresentados no Portal estão disponíveis em formatos multimodais, com utilização de diversos recursos de mídias virtuais, como vídeos, áudios e imagens; para fins
educativos, sendo utilizados como fonte de pesquisa, recursos para professores, tradutores, pesquisadores e demais interessados.
Neste contexto, o presente projeto de conclusão de curso encontra-se inserido no contexto atual de internacionalização da UFSC e propõe-se a desenvolver uma interface digital responsiva respondendo a seguinte pergunta: Como apresentar um portal digital de documentação e descrição de línguas faladas, sinalizadas e escritas de forma acessível e amigável, para que os interessados possam utilizá-lo como recursos e fontes de pesquisa para fins educacionais?
1.1. OBJETIVOS
1.1.1. Objetivo Geral
Desenvolver o design informacional, de navegação e de interface do Portal Línguas, Literaturas e Práticas Culturais, a partir do envolvimento dos stakeholders.
1.1.2. Objetivos Específicos
Eleger uma abordagem que se adeque ao contexto do projeto e que permita a integração e a participação de stakeholders - os professores participantes da comissão do projeto, que também são usuários, e participam da alimentação do conteúdo;
Elaborar um protótipo interativo e aplicar testes de usabilidade com o público-alvo; Compor um guia de estilo para orientação do desenvolvimento e implementação do
projeto.
1.1.3. Justificativa
A escolha do tema deste projeto de conclusão de curso se deu diante da necessidade de elaboração de um portal interativo para o projeto Portal Línguas, Literaturas e Práticas Culturais para a propagação no meio acadêmico internacional de informações, conhecimentos e pesquisas realizadas nos programas de pós-graduação de Linguística, Literatura e Design da UFSC.
Em 2017, 98,7% dos domicílios brasileiros em que havia utilização da internet, o telefone móvel celular era o meio utilizado para este fim (IBGE, 2018, p. 6). Tendo em vista a popularização e disseminação do uso dos aparelhos smartphones, manifesta-se a necessidade
de gerar um portal responsivo, que pode ser visualizado e utilizado pelo público-alvo tanto em computadores quanto em aparelhos de telefone móvel.
Portanto, a proposta deste projeto é elaborar um portal amigável e acessível, para acadêmicos e pesquisadores das áreas de Linguística, Literatura e Design terem fácil acesso aos conteúdos que foram e são pesquisados e desenvolvidos dentro da UFSC.
1.1.4. Delimitação do projeto
Este projeto define-se pela realização do design do Portal Línguas, Literaturas e Práticas Culturais, plataforma digital para armazenamento e divulgação de corpora produzida na UFSC. Nas delimitações do escopo proposto, estão incluídas as etapas de design, desde a pesquisa, desenvolvimento, até a prototipação e criação de um guia de estilo. A implementação final do Portal fica atribuída a um programador.
Considerando-se a grande quantidade de páginas que o portal terá, o desenvolvimento do projeto foi limitado à geração das páginas principais do primeiro nível de navegação, com textos e imagens representativas. O conteúdo a ser inserido no portal, quando este for implementado, é de responsabilidade dos docentes e discentes dos programas de pós-graduação de Linguística, Literatura e Design da UFSC.
2. METODOLOGIA
O projeto continha duas demandas inerentes:
1. Envolver os stakeholders, que segundo Garret (2011), são tomadores de decisão seniores responsáveis por partes da organização que serão afetadas pela direção estratégica final do produto. No caso do projeto em questão, os stakeholders são os professores envolvidos no projeto, provedores de conteúdos para o Portal;
2. Ofertar a melhor experiência na interação dos usuários finais com o Portal.
Para melhor suprir as necessidades do projeto, foi implementada uma metodologia inspirada no framework Inovação Centrada no Ser Humano - ICH de Cardoso (2012) e nos tópicos de projeção de J.J. Garrett (“The Elements of User Experience”, 2011), com a abordagem cíclica da norma ISO 9241:2011 - “Projeto centrado no ser humano para sistemas
interativos” (Figura 1).
Figura 1 - Representação da metodologia
Fonte: Desenvolvido pela autora, a partir de Cardoso (2012) e Garret (2011)
O diagrama desenvolvido segue um fluxo cíclico, em que cada etapa pode ser repetida quantas vezes for necessário. O framework é composto por três grandes etapas (conhecer,
materializar e avaliar), cada uma contará com a aplicação de técnicas e ferramentas de design, que serão apresentadas com mais detalhes adiante. Após cada grande etapa, sucedeu-se a validação com os stakeholders, para manter o alinhamento do projeto.
A prática de criar experiências de usuário atraentes e eficientes é chamada de design centrado no usuário, que se busca levar o usuário em consideração a cada passo do caminho ao desenvolver seu produto (GARRET, 2011).
Para maximizar as chances de sucesso do projeto desenvolvido partindo do entendimento de Cooper, Reimann e Cronin (2007) de que o sucesso de um produto está relacionado ao nível em que ele atende às necessidades dos usuários e os objetivos do cliente que solicitou o projeto, cada grande etapa sucedeu-se de uma validação com os stakeholders (CARDOSO, 2012).
2.1. CONHECER
Esta etapa concentra-se no entendimento do problema, a partir do levantamento de dados, necessidades e desejos dos usuários e também a forma como os concorrentes ou similares se apresentam e funcionam (CARDOSO, 2012).
Foi realizada uma análise preliminar de similares para situar as necessidades funcionais do projeto e alinhar as demandas do cliente. Com os dados coletados nesta pesquisa inicial, foi possível identificar a descrição do público-alvo e aprofundar, a partir de entrevistas, nas necessidades dos usuários e assim elaborar os perfis das personas.
Para o desenvolvimento desta etapa, foram utilizadas as seguintes ferramentas:
2.1.1. Pesquisa preliminar
A primeira etapa é a realização de uma pesquisa preliminar de alguns similares do Portal, com análise de fatores funcionais, como conteúdo, diferenciais, pontos positivos e negativos e funcionalidades, com a finalidade de conhecer mais profundamente o que o mercado já oferece em questão de portais de línguas, voltados à disponibilização de conteúdo informativo.
Constitui-se em uma análise dos produtos similares que mapeia as funcionalidades existentes em cada um deles de forma comparativa, destacando as boas e más práticas de UX. Ajuda a entender os padrões que estão sendo criados nesta área em matéria de usabilidade, eficiência e eficácia da experiência (TEIXEIRA, 2015).
2.1.3. Entrevistas
Um dos principais resultados das entrevistas com usuários é a coleta de um conjunto de padrões de comportamento que ajudam a categorizar os modos de uso de um produto e sugerem objetivos e motivações do público-alvo, que conduzem à criação de personas (COOPER, 2014).
2.1.4. Personas
A partir das entrevistas é possível criar personas, que retratam necessidades, comportamentos e motivações de uma gama de usuários reais. Ao colocar um rosto e um nome nos dados coletados durante a pesquisa, as personas podem ajudar a garantir que você tenha os usuários em mente durante o processo de design e criem empatia com os mesmos (GARRET, 2011).
2.1.5. Reuniões de validação
Durante o processo do projeto, foi realizada uma reunião a cada mês, para a validação de micro e macro etapas. Nestas reuniões eram apresentados aos stakeholders os materiais e processos desenvolvidos, em seguida acontecia uma discussão e a etapa era validada.
2.2. MATERIALIZAR
Nesta etapa, os dados coletados e gerados na etapa anterior são materializados em soluções entregáveis. Durante esta etapa foi definido o quadro de requisitos, realizado o card
sorting, determinada a organização da arquitetura da informação e desenvolvido os wireframes.
Para o desenvolvimento desta etapa, foram utilizadas as seguintes ferramentas:
Baseado nas informações apuradas na etapa “Conhecer”, as necessidades do usuário e os objetivos do produto são traduzidos em requisitos específicos para o conteúdo e funcionalidade que o produto oferecerá aos usuários (GARRET, 2011).
2.2.2. Card sorting
Card sorting é utilizado para entender como os usuários organizam e hierarquizam
informações e conceitos. Os usuários são convidados a participar de uma dinâmica que contém o objetivo de ordenar e classificar um conjunto de cartas que contêm funções ou componentes do produto (COOPER, 2014).
2.2.3. Arquitetura da informação
Com as informações coletadas no card sorting, é possível estruturar a arquitetura da informação, encarregada da criação de esquemas organizacionais e de navegação que permitem aos usuários percorrer o conteúdo de forma eficiente e eficaz (GARRET, 2011).
2.2.4. Wireframe
O wireframe é uma representação básica, utilizada para identificar e organizar os componentes de uma página. Ele aponta o caminho em direção ao design da superfície (GARRET, 2011).
2.2.5. Design Visual
No design visual, conteúdo, funcionalidade e estética se unem para produzir um design completo que agrada o usuário enquanto cumpre todos seus objetivos e comunica adequadamente todas as informações (GARRET, 2011).
2.3. AVALIAR
Nesta etapa é realizada a avaliação dos resultados das etapas desenvolvidas anteriormente, segundo o ponto de vista de uso do produto (CARDOSO, 2012).
2.3.1. Teste de usabilidade
É realizada uma entrevista pessoal com o usuário, na qual se pede a ele que realize uma série de tarefas em um protótipo do produto. À medida que o usuário interage com o produto, o pesquisador faz anotações sobre seu comportamento e suas opiniões. No final, são feitas perguntas para melhor entendimento do raciocínio do usuário (TEIXEIRA, 2015).
3. DIAGNÓSTICO
O diagnóstico constitui-se na descrição das coletas de informações realizadas para caracterizar o projeto, com enfoque maior no usuário. Foi iniciado com uma pesquisa preliminar para estabelecer parâmetros do projeto.
3.1. PESQUISA PRELIMINAR
Na primeira reunião com os stakeholders, realizada no dia 27 de fevereiro de 2019, a metodologia do projeto foi apresentada e foram indicados portais similares para a pesquisa preliminar e definido o público-alvo, que se estabeleceu em 1) Público primário: Pesquisadores da área de linguística; Pesquisadores da área de literatura; Professores de português; Professores de literatura; 2) Público secundário: Professores brasileiros e estrangeiros de línguas; tradutores e intérpretes.
A pesquisa preliminar consiste em uma análise introdutória de cinco portais similares, para observar quais conteúdos são disponibilizados, funcionalidades e pontos positivos e negativos que estes portais oferecem. Os portais examinados foram escolhidos em uma primeira conversa realizada com stakeholders, e estes são: o portal de Libras UFSC; o portal de idiomas Microsoft; o portal de idiomas do Governo do Canadá; o portal de idiomas Migration Policy
Institute e o portal do Instituto Goethe.
Desta pesquisa foi possível extrair informações pertinentes e pontos em comum entre os portais, de funções e conteúdos presentes nesses similares.
Quadro 1 – Análise preliminar de similares
Portal Sobre Principais conteúdos Funcionalidades
Libras UFSC Site informativo do curso de Libras da UFSC. Informações sobre o curso (presencial e à distância); Biblioteca (e/v-books, jogos, vídeos e publicações); Ferramenta de busca; Avatar de Libras; Acervo
Portal de Idiomas Microsoft
Site para pesquisas sobre idiomas Materiais para download; Pesquisa de terminologia; Ferramenta de busca; Acervo; Ferramenta de tradução de idiomas Portal de Idiomas Canadá
Site com informações sobre as línguas inglesa e francesa para conhecimento Ferramenta de auxílio em gramática e fonologia; Teste de conhecimento de língua; Biblioteca; Notícias Ferramenta de busca; Texto informativo; Ferramenta de tradução de idiomas Portal de Idiomas Migration Policy Institute
Site com informações bibliográficas da língua inglesa Pesquisas e iniciativas; Publicações (Relatórios, artigos, livros, etc); Divulgação de eventos Ferramenta de busca; Ajuste de tamanho da fonte; Texto informativo; Acervo Instituto Goethe
Site com informações sobre a língua alemã e cursos para aprendizagem do idioma Informações sobre cursos e testes de alemão; Ferramentas de prática da língua; Conteúdo cultural (revistas, blog, filmoteca); Texto informativo; Acervo; Agenda
Página institucional
Fonte: Autora
Foi possível verificar que os portais de línguas e idiomas previamente analisados apresentam alguns pontos em comum, como a presença de muitos textos, distribuídos de forma desorganizada e fraca priorização do conteúdo; uma navegação complexa pelo site, fator causado pela má construção de arquitetura da informação; uma limitada utilização de recursos visuais, que quando ausente, pode causar fadiga e desorientação.
Esta pesquisa foi determinante para selecionar os portais com relevância substancial para um maior aprofundamento na próxima etapa, de análise de similares (Apêndice A).
3.2. ANÁLISE DE SIMILARES
Após a pesquisa preliminar, foram escolhidos dois portais de línguas para a realização da análise de similares aprofundada. Para guiar esta etapa, foi utilizada a ferramenta MaTCH
Checklist, resultado de uma pesquisa do GQS/INCoD/UFSC. A ferramenta facilita a execução
de uma avaliação heurística através de um formulário com perguntas voltadas à usabilidade do produto, baseadas nas heurísticas de Nielsen (NIELSEN, 1994).
Os portais analisados foram: Instituto Goethe, é o instituto cultural de âmbito internacional da República Federal da Alemanha, que promove o conhecimento da língua alemã no exterior e o intercâmbio cultural internacional; e o Instituto Treccani, instituto com o objetivo de compilar, atualizar, publicar e divulgar a “Enciclopédia Italiana de Ciências, Letras e Artes”.
Figura 2 - Website Instituto Goethe Brasilien, página principal
Fonte: <https://www.goethe.de/ins/br/pt/index.html>, acesso em 24/04/2019.
Figura 3 - Website Treccani, página inicial
Fonte: <http://www.treccani.it/>, acesso em 24/04/2019.
O resultado da análise feita com MaTCH (Anexo A) foi de 52,3 pontos para o Instituto
Goethe e de 50,2 pontos para o Instituto Treccani, dentro de uma escala de 0 a 70 pontos.
"(...) mantêm acessíveis menus e funções comuns do aplicativo em todas as telas, evidenciam o número de passos necessários para a realização de uma tarefa, permitem que o usuário cancele uma ação em progresso (...)"
O portal do Instituto Goethe possui um menu fixo ao topo da tela, que permite que todas as páginas sejam acessadas de qualquer lugar do site. A hierarquia visual que organiza as categorias e subcategorias presentes é muito bem empregada. Todos os links disponíveis possuem sua função visualmente explícita, com características de “clicáveis”.
O portal Treccani funciona com uma forte ferramenta de busca, presente em todo o site, com mais de 1 milhão de tags associadas. Porém, após um segunda avaliação, foi possível notar que o site possui falhas na organização e apresentação do conteúdo. Os artigos postados não seguem a mesma categorização que é apresentada no menu.
3.3. ENTREVISTAS
As entrevistas realizadas continham a finalidade de compilar mais traços de personalidade e perfil para aprofundar a caracterização do público-alvo e das personas que seriam realizadas na etapa seguinte. E também reconhecer as preferências dos usuários quanto a portais de linguística e literatura que se comportam como similares ao Portal de Línguas, Literaturas e Práticas Culturais.
A estruturação e condução das entrevistas foi baseada na chamada “entrevista semiestruturada”, definida por Roger, Sharp e Preece (2013), em que é criado um roteiro básico para orientação, mas permite uma exploração maior do assunto fora das perguntas pré-estabelecidas (Apêndice B).
Entre os dias 25 de junho e 1º de julho de 2019, foram realizadas entrevistas presenciais com quatro estudantes de pós-graduação dos programas de Linguística e Literatura da UFSC. No infográfico abaixo, é possível verificar o perfil desses quatro estudantes e destaques retirados de trechos das entrevistas.
Figura 4 - Infográfico de informações retiradas das entrevistas
Fonte: Autora
Todos os entrevistados disseram seguir alguma página de divulgação de conteúdo sobre linguística/literatura, ou instituições relacionadas à temática nas redes sociais. Também estão inscritos em newsletters ou acompanham frequentemente sites acadêmicos e portais de artigos. Destas entrevistas foi possível constatar que o “Google” é a ferramenta mais utilizada para encontrar materiais e sites relacionados à linguística e literatura. Outra forma de encontrar conteúdo para pesquisa que os entrevistados citaram são as redes sociais ou através de indicação de colegas do meio. Uma das entrevistadas relatou que participou de um curso da Biblioteca Universitária de metodologia científica e que assim tomou conhecimento de outras fontes online para pesquisas acadêmicas.
Os entrevistados contaram que tiveram melhores experiências com sites que disponibilizam materiais para download mais leves, legíveis e de melhor qualidade; e também
sites com conteúdos objetivos e organizados em categorias claras. Algo que foi citado por uma
das entrevistadas, que lhe oferece maior segurança e credibilidade aos sites é a utilização de nomes de pessoas reconhecidas no meio. Outra entrevistada destacou que o detalhamento e organização das informações sobre editais de bolsas de mestrado são algo positivo que ela reconhece em um dos sites que utiliza para este fim.
Por outro lado, todos os entrevistados tiveram dificuldade em algum momento da navegação por sites de acervo para encontrar os arquivos que procuravam, seja pela problemática operação das tags no site, ou pela irregular ordenação das informações. Uma das entrevistadas expôs ter receio de perder dados importantes e por tal razão registra imagens da tela do computador. Sites não responsivos também foram um problema relatado nas entrevistas, e sites com muita propaganda foram criticados por interferir na leitura e causar desconforto visual, além das fontes pequenas e espaçamento reduzido, que dificultam a legibilidade.
3.4. PERSONAS
A partir dos dados coletados durante as entrevistas, junto aos fornecidos nas reuniões com os stakeholders, foi possível criar uma persona primária, voltada ao aluno de pós-graduação das instituições brasileiras; e uma persona secundária, voltada aos professores e pesquisadores estrangeiros, que utilizarão o portal em inglês.
Nome: Fabiana Lima Idade: 27 anos
Redes sociais: Whastapp, Instagram Escolaridade: Mestranda
Linha de pesquisa: Estudo do uso, da variação, do contato e da mudança linguística
Narrativa: Fabiana começou o seu mestrado em Linguística na Universidade Federal de São Paulo este ano. Costuma iniciar a procura por arquivos e artigos para sua pesquisa no “Google”, mas tem dificuldade em encontrar fontes confiáveis e gratuitas. Quando encontra um
site seguro, o “PDF” para download está danificado ou é necessário criar um cadastro para
conseguir permissão de uso do arquivo. Uma vez a cada quinze dias, acessa o portal de pós-graduação da sua universidade para verificar os eventos relacionados à sua área, mas não consegue realizar esta tarefa pelo celular, pois o site não é responsivo.
Nome: Giovanni Bianchi Idade: 53 anos
Redes sociais: Whatsapp, Facebook Escolaridade: Doutorado
Linha de pesquisa: Teoria da modernidade
Narrativa: Giovanni é italiano e atua como professor no curso de línguas estrangeiras modernas e literaturas na Universidade de Bergamo. Constantemente procura na internet por
sites de instituições internacionais com materiais relacionados ao tema de sua pesquisa. Possui
interesse em compartilhar seu conhecimento fora da Itália e aprimorar suas habilidades de pesquisador, portanto acha que se candidatar como professor visitante em alguma universidade estrangeira pode ser uma ótima oportunidade.
4. DESENVOLVIMENTO
4.1. QUADRO DE REQUISITOS
Com os dados coletados nas entrevistas e reuniões com os stakeholders, foi possível montar um quadro de requisitos para o projeto, que foi apresentado, discutido e validado na reunião ao final de junho de 2019. Nesse quadro estão reunidas as necessidades dos usuários identificadas para este projeto e os meios para atendê-las.
Quadro 2 – Quadro de requisitos
Objetivo do usuário Requisito de funcionalidade
Requisito de conteúdo Fonte de identificação
Encontrar com maior facilidade os conteúdos e evitar frustração ao procurar um conteúdo no Portal Ferramenta de busca; uso de tags Artigos, revistas, entrevistas e materiais categorizados e tagueados Entrevistas com usuários; análise de similares
Ter uma experiência prazerosa na interação a partir de dispositivo móvel
Páginas responsivas Imagens, vídeos, áudios Entrevista com usuários
Sentir-se incluído no projeto
Vínculo para portal em outro idioma Portal Bilíngue (Português, Inglês e Espanhol) Reunião com stakeholders Acessibilidade e conexão à página da pós-graduação de Libras
Vínculo com o Portal de Libras
Portal Libras Reunião com
stakeholders
Maior conforto visual ao acessar os conteúdos do Portal
Uso de tipografias claras e legíveis
Entrevista com usuários
Portal e se sentir mais seguro ao utilizá-lo
sobre o Portal, com uso de imagens, infográficos e recursos visuais
stakeholders
Estar atualizado sobre o que acontece no meio acadêmico
Newsletter Novidades e
atualizações sobre o Portal
Entrevista com usuários
Fazer o download de um arquivo de materiais e mídias Disponibilização de download para os arquivos publicados no site Arquivos: pesquisas, materiais didáticos, vídeos, imagens, textos, etc
Entrevista com usuários
Compartilhar os materiais com colegas
Links para
compartilhamento por redes sociais; ou por
Entrevista com usuários
Fonte: Autora
4.2. ARQUITETURA DA INFORMAÇÃO E CARD SORTING
A estruturação da arquitetura da informação do Portal foi discutida com os stakeholders nas reuniões de março, abril e maio de 2019. No primeiro encontro, foram consideradas e discutidas as duas abordagens de organização para o conteúdo do Portal (Anexo A). Durante a discussão, o grupo presente destacou que não seria pertinente a utilização da primeira abordagem por ser muito tradicional; e a segunda estrutura não permitia a inclusão dos projetos desenvolvidos por cada professor envolvido no projeto.
Na segunda reunião citada, foi sugerido que os professores indicassem seus projetos para o portal de modo a estabelecer modos de aproximação e organização. Foi destacada a necessidade de que esta estrutura reflita as conexões entre os projetos e acervos já desenvolvidos nas pesquisas, dos diferentes programas de pós-graduação participantes do projeto.
Com a finalidade de validar a proposta de conteúdos, funcionalidades e a arquitetura da informação, foi realizada presencialmente a dinâmica de card sorting com usuários do Portal. Neste exercício é solicitado aos usuários que classifiquem e ordenem cartões oferecidos pelo moderador, cada um contendo uma funcionalidade ou informação relacionada ao produto
(COOPER, 2014). Sua finalidade é de reconhecer padrões de organização ou falhas de nomenclaturas e composição que impedem a melhor compreensão do projeto.
Quatro participantes foram convidados a participar desta dinâmica. Esses possuíam entre 20 e 56 anos e estão conduzindo seus mestrados ou doutorados dentro da área de Linguística ou Literatura na UFSC. Os usuários foram convidados a realizar individualmente a atividade, que foi conduzida durante o período dos dias 25 de junho a 1º de julho de 2019.
A arquitetura apresentada aos participantes é exibida a seguir, na Figura 5.
Figura 5 - Arquitetura pré-estabelecida com stakeholders
Fonte: Autora
Os participantes não apresentaram dificuldades na resolução da atividade, completando-a com êxito.
Foi possível concluir que algumas nomenclaturas escolhidas para definir páginas do Portal podem causar confusão aos usuários. No caso de “Memória e história”, que foi nomeado pelos stakeholders como uma linha de projeto, os usuários o confundiram como uma página de informações e histórico do projeto. No caso de “Portal na Escola”, dois participantes levantaram um questionamento com dúvidas quanto ao que se refere esta área e sobre a necessidade da mesma estar presente no Portal.
Dois dos participantes reposicionaram o card de “Pós-graduações” para junto às “Linhas de Projeto”, pois acharam mais adequado. Uma incerteza que os participantes apresentaram durante a atividade foi quanto ao uso da nomenclatura “Linhas de Projeto”, ao invés de “Linhas de Pesquisa”, é o nome utilizado convencionalmente no meio acadêmico.
Figura 6 - Card sorting realizado com participante 1
Figura 7 - Card sorting realizado com participante 2
Fonte: Autora
Figura 8 - Card sorting realizado com participante 3
Figura 9 - Resultado do card sorting realizado com participante 4
Fonte: Autora
A realização do card sorting foi fundamental para validação e ajuste da nova arquitetura da informação do Portal, que será apresentada em seguida.
Por fim, houve a indicação da adoção das linhas de projeto dos programas como categorização e divisão dos temas. Foi validada a arquitetura da informação, apresentada a seguir.
Figura 10 - Diagrama de arquitetura da informação final
4.3. WIREFRAMES
Após a definição e validação da arquitetura da informação, foi iniciada a etapa de elaboração dos wireframes da interface. Por conta do calendário reduzido e pela demanda dos
stakeholders, apenas alguns wireframes foram desenhados e logo foi iniciada a etapa de
desenvolvimento das diretrizes visuais da interface, para prosseguir com a prototipação e testes de usabilidade do Portal.
Foram elaboradas duas propostas de wireframe para a Homepage antes de dar continuidade à caracterização do projeto.
A primeira versão do wireframe, representada pelas figuras 11 e 12, apresenta um feed de atualizações, com os projetos e materiais mais recentes postados pelos professores participantes do projeto. Também é apresentado um menu onde estão disponíveis os links “Linhas de projeto”, que expande para todas as linhas de projeto disponibilizadas nas pós-graduações de Linguística, Literatura e Design da UFSC; “Materiais multimodais”, que expande para “Entrevistas”, “Materiais Pedagógicos” e “Documentos”; “Sobre o Portal”; “Acesso Interno” e um ícone de busca, para realizar pesquisas dentro do Portal. Após o feed de atualizações, estão dispostas algumas linhas de projeto e um link para a página de materiais disponíveis. A versão mobile apresenta uma redução do menu em botão “hambúrguer” e as linhas de projeto em slider.
Figura 11 - Versão 01 do Wireframe da Homepage em desktop
Figura 12 - Versão 01 do Wireframe da Homepage em mobile
Fonte: Autora
A segunda versão do wireframe, escolhida para seguir na parte de design visual, representada pelas figuras 13 e 14, apresenta uma imagem de capa, junto com o nome do Portal em destaque. O menu desta versão, além dos itens já presentes na versão 01, dispõe o “Acesso Interno” como um botão em destaque e possui também um link para alterar o idioma do Portal. Logo após a imagem de capa, são apresentadas todas as linhas de projeto das pós-graduações vinculadas ao projeto, seguida por links para as páginas de materiais disponíveis e uma seção com uma breve descrição sobre o projeto. A versão mobile apresenta as mesmas características da versão 01, mas com a adição de uma seção “Sobre o Portal”.
Figura 13 - Versão 02 do Wireframe da Homepage em desktop
Figura 14 - Versão 01 do Wireframe da Homepage em mobile
4.4. DESIGN VISUAL DA INTERFACE
Em reunião com os stakeholders, realizada em agosto de 2019, a partir de uma atividade dinâmica de brainstorm, foram sugeridas e selecionadas as palavras-chave que conceituaram a parte visual do Portal (Apêndice C). As quatro palavras escolhidas ao final do exercício foram “Pluralidade”, “Inclusão” e “Dinâmico”.
Figura 15 - Nuvem de palavras retiradas da dinâmica de brainstorm com os stakeholders
Fonte: Autora
Após a escolha das palavras, foram criados painéis visuais para cada conceito, com a intenção de identificar recursos visuais valiosos para a criação de uma marca e identidade visual para o Portal. O conceito "Pluralidade" (Figura 16) aparece com o intuito de reforçar a diversidade e variedade que há ao retratar o ser humano e suas formas múltiplas de expressão. No painel visual deste conceito é possível perceber a presença de formas orgânicas irregulares, com padronizações e repetições e o uso de cores saturadas.
Figura 16 - Painel visual Pluralidade
Fonte: Autora
O conceito “Inclusão” (Figura 17) entrega ao projeto a conotação de união e proximidade muito presente na comunicação entre as pessoas. No seu painel visual a presença de círculos e formas arredondadas é muito evidente, junto com a forma de mãos interligadas e dedos entrelaçados. O azul está bastante presente na representação visual deste conceito, junto com tons vermelhos e alaranjados.
Figura 17 - Painel visual Inclusão
Fonte: Autora
O conceito “Dinâmico” (Figura 18) tem a força do movimento e a mudança constante que o projeto simboliza, por abordar a comunicação em diversos estados. Em seu painel visual pode-se encontrar traços e formas diagonais e com arestas, além da sobreposição de elementos e o uso de ilustrações digitais junto a fotos. As cores presentes também são saturadas, sem uma paleta muito definida.
Figura 18 - Painel visual Dinâmico
A partir destes painéis, foi realizada uma matriz de análise de elementos (Quadro 3), com a qual foi possível identificar formas, cores e tipografias presentes com recorrência nas imagens representativas das palavras-conceito.
Quadro 3 - Matriz conceitual - análise dos elementos de cada painel conceitual
Fonte: Autora
4.4.1. Logotipo
Com as informações extraídas da matriz conceitual, os esboços começaram a ser desenhados digitalmente e algumas alternativas surgiram, como apresentadas no Apêndice D. A ideia central da forma da iconografia da marca é representar uma vírgula e aspas, elementos muito utilizados na comunicação escrita, e balões de fala, símbolo que representa a conversa e o diálogo. As formas arredondadas, transparentes e sobrepostas remetem o conceito "inclusão", e a presença de traços diagonais formados pela ponta do balão de fala no canto inferior esquerdo, com movimento em direção à ponta superior direita vem do conceito "dinâmico". O uso de cores saturadas e complementares veio da análise de cores do conceito "pluralidade". Os painéis de todos os conceitos apresentaram maioridade de tipografias não serifadas em maiúscula.
Em agosto foi realizada uma reunião com os stakeholders para apresentar a proposta de identidade visual criada para o Portal. As diretrizes de forma e cor foram consideradas adequadas, entretanto, foram sugeridos mais testes quanto à tipografia. Os slides apresentados durante a reunião podem ser encontrados no Apêndice E. Com as considerações feitas pelos
stakeholders e com alterações aplicadas, a identidade visual final da marca "Portal Línguas,
Figura 19 - Logotipo da marca Línguas, Literaturas e Práticas Culturais
Fonte: Autora
4.4.2. Cores
As cores escolhidas para o Portal possuem alta saturação e estão muito presentes nos três painéis visuais: azul, laranja e amarelo. Além da forte presença nas representações visuais dos conceitos, as cores escolhidas são complementares e criam harmonia entre si.
Figura 20 – Cores primárias e secundárias
Fonte: Autora
4.4.3. Tipografia
A tipografia escolhida para uso na interface foi “Montserrat”, por ser uma fonte sem serifa e possuir sete variações de peso (ultraligh, light, regular, semibold, bold, semiblack e
black). Suas formas bem definidas garantem boa legibilidade em telas de computador e
Figura 21 – Tipografia Montserrat
Fonte: Autora
Para utilização na plataforma desktop, a tipografia foi empregada em peso bold em
uppercase no tamanho de 76px para títulos de capa, em peso bold em uppercase no tamanho
de 50px para títulos de categorias, em peso bold em lowercase no tamanho 30px para títulos secundários e em peso regular em lowercase no tamanho 20px para corpo de texto.
No caso da plataforma mobile, a tipografia foi empregada em peso bold em uppercase no tamanho de 24px para títulos de capa, em peso bold em uppercase no tamanho de 20px para títulos de categorias, em peso bold em lowercase no tamanho 18px para títulos secundários e em peso regular em lowercase no tamanho 14px para corpo de texto.
4.5. APLICAÇÃO DO DESIGN VISUAL
Seguindo as etapas anteriores, foi desenvolvida a interface digital do Portal. Para o desenvolvimento das telas foi utilizado o programa Adobe Xd. A partir da criação das telas, foi realizada a prototipação no mesmo programa, simulando a utilização de alguns elementos da versão desktop e mobile do Portal. Este protótipo serviu para a execução dos testes de usabilidade com usuários e a apresentação para os stakeholders. Após estes dois passos, que serão apresentados mais a frente, algumas telas sofreram ajustes para melhor atender os requisitos do projeto. Ao total, foram construídas 8 telas, mais cinco variações da homepage, com algumas variações de apresentação de acordo com as barras de submenu.
Figura 22 – Tela inicial do Portal em plataformas desktop e mobile
Fonte: Autora
Figura 23 – Página inicial com submenus de “linhas de projeto”
Figura 24 – Página inicial com submenus de “materiais e mídias”
Figura 25 - Página inicial com submenus de opções de idiomas
Figura 26 - Página inicial com submenu de acessibilidade em Libras
Figura 27 - Página inicial com barra de busca ativada
Figura 28 – Página da linha de projeto “política linguística e discurso” em plataformas
desktop e mobile
Fonte: Autora
Figura 29 – Página do projeto “Cátedra UNESCO em políticas linguísticas para o multilinguismo” em plataformas desktop e mobile
Fonte: Autora
Figura 30 – Página “entrevistas” em plataformas desktop e mobile
Fonte: Autora
Figura 31 – Página “materiais pedagógicos” em plataformas desktop e mobile
Fonte: Autora
Figura 32 – Página “missões” em plataformas desktop e mobile
Fonte: Autora
Figura 33 – Página missão “University of Massachussetts, Amherst” em plataformas desktop e mobile
Fonte: Autora
Figura 34 – Página “sobre o Portal” em plataformas desktop e mobile
Fonte: Autora
Figura 35 – Menu em plataforma mobile
4.6. TESTE DE USABILIDADE
Para a validação da aplicação do design visual, foi desenvolvido um protótipo interativo de alta fidelidade e foram realizados testes de usabilidade. A ferramenta utilizada para a prototipação foi o Adobe Xd, e todos os testes aconteceram no Hiperlab, na UFSC, no período entre os dias 07 e 21 de outubro de 2019. No total, foram realizados oito testes, destes um sendo o piloto, quatro em plataforma desktop e três em plataforma mobile. Entre os usuários, estavam sete mulheres e um homem, com média de idade entre 25 e 41 anos, todos alunos dos programas de pós-graduação de Linguística e Literatura da UFSC.
Para a realização do teste, os usuários receberam três cenários, com respectivas tarefas, para realização no protótipo. Os usuários e a tela das plataformas foram gravadas, e foi solicitado aos usuários que estes verbalizassem suas linhas de raciocínio.
Os cenários e suas respectivas tarefas a serem executadas foram as seguintes:
Cenário 01:
Você é um estudante de pós-graduação em Linguística que está fazendo seu mestrado na USP. Você encontra no Google o Portal Línguas, Literaturas e Práticas Culturais e agora que está dentro dele, quer saber mais sobre o projeto e as pós-graduações envolvidas nele.
Tarefa 01:
Ler informações sobre o Portal Línguas, Literaturas e Práticas Culturais e as pós-graduações envolvidas.
Cenário 02:
Agora que você já conhece mais sobre o Portal e as pós-graduações envolvidas, você quer ler mais informações sobre a pesquisa “Cátedra UNESCO em Políticas linguísticas para o Multilinguismo”.
Tarefa 02:
Ler sobre a pesquisa “Cátedra UNESCO em Políticas linguísticas para o Multilinguismo”.
Muito bem! Depois de ver o projeto “Cátedra UNESCO em Políticas linguísticas para o Multilinguismo”, você quer ver os materiais e mídias que são oferecidas aos visitantes a respeito de entrevistas realizadas em pesquisas.
Tarefa 03:
Saber quais materiais e mídias estão disponíveis em formato de entrevistas.
Após os cenários e tarefas, foram realizadas quatro perguntas a respeito do teste:
01. Você sentiu alguma dificuldade em realizar as tarefas? Pode comentar sobre como foi realizar cada uma?
02. Você acha que as informações apresentadas no Portal são suficientes? Acha que precisa de mais informações?
03. Teve algum ícone, botão ou palavra que você não entendeu?
04. Gostaria de dar alguma sugestão de melhoria para o Portal?
4.6.1. Teste Piloto
A primeira tarefa foi realizada com facilidade, de acordo com o caminho esperado (homepage > sobre o portal). Na segunda tarefa, a usuária olhou outros caminhos dentro do Portal, antes de seguir o caminho esperado. Neste momento houve um problema de prototipação, em que o link não estava funcional, mas mesmo com este contratempo, a tarefa foi realizada com sucesso (linhas de projeto > política linguística e discurso > projeto). A terceira tarefa também foi completada com êxito, segundo o caminho desejado, indo inclusive além da tarefa solicitada (materiais e mídias > entrevistas > materiais e mídias > materiais pedagógicos).
Nas perguntas feitas ao final do teste, a usuária disse não ter sentido dificuldade em realizar as tarefas, pontuando que a primeira foi a mais fácil, e que a segunda pra ela foi necessário experimentar um pouco mais, e por não ser da área, teve maior dificuldade de associar o nome do projeto com a linha relacionada.
4.6.2. Teste com primeiro usuário
Figura 36 – Teste com primeiro usuário
Fonte: Autora
A primeira tarefa foi executada rapidamente, de forma correta (homepage > sobre o portal). No segundo cenário o usuário olhou o menu, mas tomou um caminho diferente do esperado (homepage > projeto em destaque), mas realizou a tarefa com sucesso. A terceira tarefa, assim como a primeira, também foi realizada rapidamente, com êxito (materiais e mídias > entrevistas).
O usuário relatou ter achado as tarefas fáceis de realizar, por ser muito intuitivo e objetivo. Ademais, o usuário comentou que a cor laranja usada no submenu pode atrapalhar um pouco a leitura, causando pouco contraste.
4.6.3. Teste com segundo usuário
A primeira tarefa foi realizada da maneira esperada (homepage > sobre o portal). A segunda tarefa também foi executada como aguardado (linhas de projetos > política linguística e discurso > projeto), mas a usuária ficou confusa com o botão “saiba mais” presente na página do projeto. Na terceira tarefa, a usuária não compreendeu o objetivo final da tarefa, de olhar os materiais disponíveis em entrevistas, e acabou seguindo por outro caminho (materiais e mídias
> materiais pedagógicos). Ela disse que em entrevistas não ficou claro se são materiais sobre o site, ou que estão presentes no site.
A usuária comentou que acha que “entrevistas” deveriam estar separado de “materiais pedagógicos” e “missões”, com maior destaque. Ela também comentou que dificilmente se interessaria nos envolvidos, que os materiais são mais relevantes para ela. Também sugeriu ter entrevistas em Libras divididos na página de “entrevistas”. Demais, pontuou que a fonte utilizada para a breve descrição das entrevistas está pequena.
4.6.4. Teste com terceiro usuário
Figura 37 – Teste com terceiro usuário
Fonte: Autora
A usuária teve dúvida ao realizar a primeira tarefa, apesar de tê-la realizado de forma correta no início (homepage > sobre o portal). Ficou indecisa e olhou outros campos do menu. Ela comentou que para saber mais informações sobre o Portal, olharia quais são as linhas de projeto oferecidas. Na segunda tarefa seguiu o caminho esperado (linhas de projeto > política linguística e discurso > projeto) de forma ágil. Na terceira tarefa, não conseguiu executar da forma desejada (materiais e mídias > entrevistas), pois entendeu que os materiais que deveria olhar seriam vinculados ao projeto já aberto na tarefa dois.
Somente após a finalização das tarefas, no momento das perguntas, é que entendeu que poderia ter olhado as entrevistas em “materiais e mídias”. A usuária disse que se o objetivo do
Portal é divulgação das pesquisas para um público geral, os textos deveriam ter uma linguagem mais popular e acessível. Um ponto levantado durante as perguntas é a sugestão de acrescentar na página do projeto qual o programa de pós-graduação vinculado àquele projeto. Demais, a usuária achou o tamanho da fonte no menu um pouco pequena.
4.6.5. Teste com quarto usuário
Figura 38 – Teste com quarto usuário
Fonte: Autora
Na primeira tarefa, a usuária realizou a tarefa com facilidade, de acordo com o caminho esperado (homepage > sobre o portal). A segunda tarefa também foi realizada segundo o desejado (linhas de projeto > política linguística e discurso > projeto). E por último, a terceira tarefa foi concluída rapidamente, também segundo o esperado.
A usuária achou o Portal intuitivo e tranquilo de achar as informações necessárias. Demais, achou que está tudo bastante acessível e de fácil reconhecimento.
4.6.6. Teste com quinto usuário
A partir do quinto teste, todos os testes foram realizados com a plataforma mobile. A primeira tarefa realizada pela usuária seguiu um caminho diferente do esperado (menu > sobre o portal), mas para o entendimento da usuária a tarefa foi concluída com sucesso, pois
ela viu tudo que o Portal oferece a partir da homepage. No segundo cenário, a usuária realizou facilmente a tarefa, pois encontrou na página inicial um link que levava ao projeto. No terceiro cenário, a usuária voltou para a página inicial para depois ir para entrevistas, concluindo a tarefa com agilidade e facilidade.
No relato sobre as atividades, a usuária contou ter achado fácil e intuitivo realizar as tarefas propostas. Achou que, de acordo com sua proposta, o Portal supre todas as informações necessárias.
4.6.7. Teste com sexto usuário
No primeiro cenário, a usuária entendeu que para conhecer bem o Portal era suficiente ver o que era apresentado na página inicial, por isso, apesar de não ter seguido o caminho esperado (menu > sobre o portal), concluiu a tarefa com sucesso. Antes de ler o segundo cenário, a usuária entrou no menu e explorou a linha de projeto “políticas linguísticas e discurso”, chegando até a página sobre o projeto “Cátedra UNESCO em políticas linguísticas para o multilinguismo”. Portanto, ao ler o cenário dois, já soube exatamente o caminho a seguir. No terceiro cenário, a usuária seguiu o caminho imaginado para esta tarefa (menu > materiais e mídias > entrevistas).
A usuária contou que teve uma pequena dúvida na terceira atividade, mas que resolveu facilmente olhando no menu. Demais, achou que a quantidade de informações apresentadas no Portal é ideal.
4.6.8. Teste com sétimo usuário
Na primeira tarefa a usuária foi primeiro no menu, para conferir todas as opções disponibilizadas pelo site, e dali seguiu para “sobre o portal” para concluir a tarefa. No segundo cenário, a usuária ficou confusa quanto ao objetivo a ser cumprido e acabou seguindo para “materiais e mídias” em menu e em seguida “entrevistas”. Não ficou claro a conclusão desta tarefa. Na leitura do terceiro cenário, a usuária reconheceu um engano na realização da tarefa anterior, e então seguiu o caminho esperado para o cenário dois (menu > linhas de projeto > política linguística e discurso > projeto).
Apesar da dúvida na segunda tarefa, a usuária achou que a organização das informações dentro do site faz sentido, achou que a dificuldade foi ao compreender a tarefa a ser feita. Como sugestão, a usuária pontuou que seria uma interessante dar maior destaque visual para as
subcategorias presentes no menu mobile, ela achou que o contraste entre categorias e subcategorias foi insuficiente.
4.6.9. Considerações gerais sobre os testes de usabilidade
Ao final dos testes de usabilidade, foi possível notar que em maioria, os cenários foram compreendidos e as tarefas propostas foram realizadas com facilidade pelos usuários.
Figura 39 – Compilado dos testes de usabilidade
Fonte: Autora
Em geral, as tarefas foram concluídas com facilidade pela maioria dos usuários, com exceção de duas tarefas, que não foram finalizadas como esperado e fugiram da proposta de conclusão. Em um dos casos, a usuária verbalizou a opção que achava adequada para o desfecho da tarefa, que estava presente na página do projeto “Cátedra UNESCO em políticas linguísticas para o multilinguismo”, na lateral do texto central, em forma de ícone. No outro caso, a usuária declarou ter se confundido com a descrição do cenário e que acha que a não conclusão da tarefa não está relacionada a uma falha no Portal.
4.7. APRESENTAÇÃO DO PROTÓTIPO EM REUNIÃO COM STAKEHOLDERS
No final de outubro, em reunião com professores e pós-graduandos envolvidos no projeto, dos programas de pós-graduação em Linguística, Literatura e Design da UFSC, foi apresentado o protótipo interativo do Portal e um breve compilado do resultado dos testes de usabilidade. A reunião aconteceu no Bloco B do CCE e durante sua sessão, foram discutidos assuntos atrelados ao futuro do projeto e foram feitos comentários a respeito do resultado apresentado, que podem ser acrescentados ao projeto durante seu desenvolvimento, junto ao programador que ficará responsável pela implementação do Portal.
Entre as questões discutidas, foram tratadas algumas funcionalidades da interface digital desenvolvida; a estética apresentada; e a continuidade que será executada após a entrega deste projeto.
A respeito das funcionalidades e detalhes a serem ajustados na interface digital, foi citada a necessidade de incluir uma nova linha de projeto, intitulada “ensino e formação de professores”; a remoção do “s” ao final do nome da linha de projeto “estudo de gêneros”; a inclusão de um resumo sobre as linhas de projeto em suas respectivas páginas; foi realizada a validação dos campos necessários para cadastro de projetos ao Portal: título, coordenação, instituições envolvidas, órgão de fomento, membros da equipe e demais colaboradores, resumo, palavras chave, produções (aqui pode entrar textos, artigos, vídeos, fotos), links relacionados/projetos relacionados; foi reconhecida a necessidade da divisão da subcategoria “missões” em dois campos: “missões de professores” e “missões de pós graduandos”; a inclusão de uma lista destacando as instituições parceiras e as conveniadas na página “sobre o Portal”; acrescentar um espaço para registrar o ORCID na identificação do professor nas páginas de projetos; a oportunidade de cadastrar o Portal no portal do MEC; e a carência de divisão do menu “sobre o Portal” em quatro subcategorias: “sobre”, “programas envolvidos”, “participantes” e “instituições conveniadas”.
Quanto à estética do Portal, foi mencionada a produção de uma imagem para “capas dos vídeos, entrevistas, etc”; e a revisão da legibilidade do texto branco no fundo cor laranja nos submenus.
Sobre a continuidade e a atualização do Portal, foi decidido que os pós-doutorandos de cada programa de pós-graduação seriam os responsáveis pelas atualizações dos conteúdos e ficariam como editores; e que apenas um professor ficaria responsável por programa de pós-graduação.
Após a reunião com os stakeholders, alguns comentários citados a cima foram tomados em consideração e junto a algumas alterações sugeridas pelos usuários, algumas modificações foram realizadas no projeto1, como citadas a seguir:
A remoção do “s” ao final do nome da linha de projeto “estudo de gêneros” (Figura 40);
Inclusão de uma nova linha de projeto, intitulada “ensino e formação de professores” (Figura 40);
1 A versão navegável do protótipo com as alterações realizadas pode ser acessado nos seguintes links: https://xd.adobe.com/view/b6a7c98a-47c2-4147-7683-4b28be6c0dd0-c096/?hints=off
A inclusão de um resumo sobre as linhas de projeto em suas respectivas páginas (Figura 41);
A inclusão de um card direcionado à página do Portal Libras dentro da página “sobre o Portal” (Figura 42);
A inclusão de uma lista destacando as instituições parceiras e conveniadas na página “sobre o Portal” (Figura 42);
A exibição de um submenu para a categoria “sobre o Portal” em quatro subcategorias: “sobre”, “programas envolvidos”, “participantes” e “instituições conveniadas” (Figura 43);
Alteração do menu mobile, com maior contraste entre as categorias e subcategorias (Figura 44);
O acréscimo do programa de pós-graduação vinculado e equipe envolvida na página de cada projeto (Figura 45).
Figura 40 – Página inicial com submenus de “linhas de projeto” com alterações
Figura 41 - Página da linha de projeto “política linguística e discurso” em plataformas desktop e mobile com alterações
Figura 42 - Página “sobre o Portal” em plataformas desktop e mobile com alterações
Figura 43 - Página inicial com submenus de “sobre o portal” com alterações
Figura 44 - Menu em plataforma mobile com alterações
