universo da tipografia
Lucas Pozzobon
RESUMO:
1. INTRODUÇÃO
O presente artigo tem como intuito descrever, a partir da metodologia dos 5I’s, o processo de projetação da interface Findtype, desenvolvida no laboratório de Interface do Curso de Desenho Industrial da Universidade Federal de Santa Maria (UFSM) sob orientação da professora Débora Aita Gasparetto, autora da metodologia que tem bases em (Garret, 2011), (Lowdermilk, 2013) e (Teixeira, 2014).
Findtype é uma interface gameficada elaborada com o propósito de introduzir ou aprofundar o usuário no universo da tipografia, através de exercícios interativos com viés educativo.
2. METODOLOGIA
A metodologia dos 5I’s, a qual esse artigo se ampara, foi implementada em 2016, no Laboratório de Interfaces DI/UFSM, para auxiliar no desenvolvimento de interfaces tendo como foco o usuário. As fases que compõe o percurso metodológico são: Ideação; Inambulação; Instauração; Inspeção e Implementação. Todas essas fases requerem iteração, testes e pesquisas com usuário com intuito de facilitar e minimizar problemas nas fases finais.
A estrutura da metodologia foi arquitetada a partir dos planos de (Garret, 2011) para facilitar experiência do usuário, no design centrado no usuário de (Lowdermilk, 2013) e nas orientações práticas de (Teixeira, 2014).
2.1 Fase 1 - Ideação
A partir do entendimendo dos processos da metodologia adotada iniciou-se o projeto da interface aqui proposto. Na fase de ideação, a primeira etapa do projeto foi responder as seguintes questões para identificar o problema e nortear o projeto:
Problema: Dificuldade de encontrar jogos de tipografia em uma interface centralizada que apresentem viés educativo.
O quê: Uma interface que aborde o tema com um layout mais atrativo e intuitivo.
Como: Desenvolvendo uma estrutura simples e intuitiva utilizando técnicas de gamificação para engajar e desafiar o usuário.
Porquê: Para difundir e ampliar noções sobre tipografia.
Para quem: Para estudantes de design, designers, publicitários e amantes da tipografia.
Por quem: Pela tipografia
Em que lugar: Em todos os lugares onde se possa ter contato com um computador ou um smartphone.
A partir dessas diretrizes deu-se início a etapa de brainstorm, Com esse processo começaram a surgir diversas ideias - tanto referentes ao desenvolvimento da interface, quanto para o nome da mesma. No decorrer da presente etapa ficou definido que o conceito chave do projeto seria criar uma interface com exercícios interativos, abordando a temática da tipografia. Foi, então, estabelecido que a interface teria três jogos principais, porém, deixando aberta a possibilidade de adição de novos jogos posteriormente. Durante essa geração de ideias foi definido, também, o nome Findtype para a interface, que remete a ideia de procura e busca por tipografias.
Para avançar na fase de ideação realizou-se uma pesquisa de referências, buscando encontrar, mapear e analisar outras plataformas que abordassem o tema proposto. Além de uma busca por referências visuais para estabelecer um padrão gráfico. A metodologia propõe o uso do Atlas Mnemosyne, método utilizado por Aby Warburg (2015) que se assemelha a um moodboard (quadro de referências que serve para mapear pontos em comum e guiar a fase de desenho do projeto).
Dentre a interfaces encontradas nessa pesquisa, destacam-se as apresentados nas figuras 1, 2 e 3, que serviram como inspiração e conduziram o rumo que a interface proposta tomou. Uma delas é o Type Method com o jogo Kerntype, onde são apresentadas palavras com o kearning² desajustado para o usuário fazer o ajuste ótico manualmente. Em cada fase o usuário recebe um feedback visual, onde seu kearning é comparado com o original, e outro através de uma nota de acordo com o desempenho. Ao longo das dez fases o usuário vai sendo testado com níveis diferentes de dificuldade.
Figura 1 - Tela inicial do Kerntype, interface gameficada para ajuste manual de kearning e Feedback com nota mostrando o kearning do usuário e o original sobrepostos.
Fonte: Screenshot
Outra inferface que serviu como referência foi a Better Web Type, que reúne uma série de informações sobre tipografia para Web, além de alguns jogos, como um quiz sobre tipografia para web e um jogo de memória com diferentes tipografias, o que pode ser conferido na (Figura 2), chamado Font Memory Game.
Figura 2 - Tela inicial do Font Memory Game do Better Web Type.
Fonte: Screenshot
E, também, outro jogo, chamado The Equilateral Triangle of a PERFECT PARAGRAPH onde o usuário deve, a cada fase, ajustar blocos de texto para web, definindo o espaço de entrelinhas, a largura do parágrafo e o tamanho de diferentes fontes.
Figura3 - Tela inicial do jogo The Equilateral Triangle of Perfect paragraph.
Fonte: Screenshot
Ambos os jogos do Better Web Type, supracitados, funcionam bem e têm um viés educativo, que vão ae encontro do que é buscado pela interface aqui planejada, desafiando o usuário a testar seus conhecimentos, porém, não é possível verificar as respostas certas quando você erra.
2.2 Fase 2 - Inambulação
Na fase de incubação o projeto começa a se deparar com questões práticas da interface, como: definição de requisitos, funcionalidades, análises de referências e quais tecnologias usar. Os requisitos da interface são as demandas do usuário, o que eles necessitam. Portanto, com base nas especifidades do projeto e, por ser voltado para designers e estudantes, optou-se por suprimir algumas etapas da metodologia para otimizar o processo.
As premissas que orientam o projeto deveriam vir das personas mas, nesse caso, foram sendo definidas ao longo do desenvolvimento do projeto através de testes com os usuários. Grande parte dos testes foi realizada com a turma do laboratório, usuários potenciais, sendo que são estudantes de design. Ao longo dos testes foi possível ir averiguando as seguintes demandas como requisitos dos usuários, entre elas: aprender sobre tipografia, entender melhor classificações tipográficas, ter instruções e dicas sobre tipografia, ter acesso a resposta certa, caso tenha errado.
Já as funcionalidades referem-se as especificações técnicas e acabaram por restringir o projeto, inicialmente, somente a navegadores desktop, por conter muitas informações que poderiam se perder e empobrecer a experiência do usuário em telas pequenas.
As principais funcionalidades verificadas durante os testes foi ter acesso as instruções ao longo dos jogos, ter acesso as respostas certas e comparar com as erradas, possibilidade de compartilhar os resultados e a visualização de telas com diferentes contrastes.