Para a elaboração da interface gráfica, o primeiro passo adotado foi uma pesquisa na internet a respeito das tendências estilísticas para websites utilizadas à época dos estudos (2015). Percebeu-se uma forte utilização do Flat design, que é um estilo gráfico marcado pela simplicidade das formas, sobretudo pela utilização de formas planas, como retângulos, quadrados e círculos, e uso de cores saturadas e vibrantes, sem efeitos de degradê (SÁ, 2014). Portanto, optou-se por utilizar o menu em forma de retângulos ou quadrados, a depender da resolução da tela, já que o flat design segue também a tendência do layout responsivo, que “visa a adaptação dos mesmos conteúdos a diferentes dispositivos digitais” (SÁ, 2014, p.81).
Após alguns estudos, chegou-se à alternativa escolhida, que dife- renciava as seções do menu por cores, já que, como dito no Capítulo 3, os surdos são sujeitos excessivamente visuais. No entanto, era necessário
pensar nas alternativas com o uso das pistas proximais em formatos de vídeos em língua de sinais e ícones. Como buscava-se testar cada um desse formatos separadamente, uma vez que juntos na mesma interface não se poderia ter muita precisão sobre qual dos dois teria maior influência no desempenho das tarefas, optou-se por elaborar sites separados. Além disso, como já explicado na seção anterior, alguns pressupostos da língua de sinais apresentavam duas vertentes, o que precisou, também, desmembrar a versão com Libras em dois sites separados.
Na primeira versão do site em Libras (V1) (projetotese.com.br/ site-libras-v1) adotou-se o pressuposto l1, ou seja, utilizou-se o vídeo em Libras na mesma página do respectivo conteúdo traduzido, como propõe Fajardo, Abascal e Cañas (2008) e Fajardo, Parra e Cañas (2010), sendo que, para os menus, posicionou-se o vídeo logo acima do texto em português, dentro de cada retângulo, e para os conteúdos, posicionou- se os vídeos ao lado esquerdo dos blocos de texto. Em relação ao menu, quando a seção apresentava subseções, abria-se um submenu em cascata, sendo que cada item possuía igualmente o seu vídeo separado, que era acionado automaticamente ao se passar o mouse sobre ele (pressuposto m). Uma prévia da interface de V1 pode-se ver na Figura 23.
Figura 23 – Interface da primeira versão em Libras (V1)
Ainda em relação à V1, nas áreas de conteúdo principal das páginas, os vídeos em língua de sinais foram divididos por blocos de conteúdo, como por exemplo, na página representada na Figura 24, que se refere à venda de artigos esportivos para homens, em que foi disposto um vídeo para cada produto posicionado do lado esquerdo do nome do produto, juntamente de sua foto, seu valor e o botão adicionar ao carrinho. Como a intérprete ficou do lado esquerdo dessas informações e as traduziu em um único vídeo, ela fazia interações visuais (pressuposto k) com o conteúdo, apontando para as informações, especialmente para aquelas que o participante teriam que clicar.
Figura 24 – Interface da página de vendas de artigos esportivos para homens (V1)
Já em relação à segunda versão do site em Libras (V2) (projetotese.com.br/site-libras-v2), adotou-se o pressuposto l2, ou seja, utilizou-se os vídeos flutuantes como propunham Debevc, Kosec e Holzinger (2010; 2011). Assim, quando o usuário passasse o mouse sobre o texto ou sobre um botão, por exemplo, o vídeo abriria em uma camada sobreposta. No entanto, ao contrário do que recomendavam os autores, optou-se por não utilizar o fundo transparente atrás do intérprete, uma vez que estudos recentes de Pivetta (2016) demonstraram que a transparência dificultou a visualização do sinal. Escolheu-se, então, o fundo branco para o vídeo, já que essa era a cor de fundo do site.
No que tange os menus, os vídeos flutuantes também surgiriam e seriam acionados conforme o usuário passasse o mouse sobre os itens (pressuposto m), com uma diferença de posição a depender de qual nível do menu o item pertenceria. Por exemplo, na Figura 25, o número 1 representa o vídeo posicionado acima do item do primeiro nível do menu, o número 2 representa o vídeo posicionado do lado esquerdo do item do segundo nível, já o número 3 representa o vídeo posicionado do lado direito do item de terceiro nível. Essas posições dos vídeos do menu foram escolhidas a fim de evitar que o vídeo ficasse em alguma posição que dificultasse a visualização completa da hierarquia do site. Em relação ao conteúdo principal da página, no entanto, adotou-se o vídeo posicionado sempre acima do respectivo texto a ser traduzido.
Diferetemente de V1, em que os vídeos do conteúdo principal ficavam dispostos do lado esquerdo do conteúdo, em V2 os vídeos só surgiam na interface quando o usuário passava o mouse sobre o conteúdo a ser traduzido, não ocupando, portanto, espaço na interface. Esse fato facilitava a utilização de outros elementos na página, como imagens, já que não era necessário reservar o espaço para os vídeos. Além disso, como não ocupavam espaço, os vídeos podiam ser reduzidos a blocos muito pequenos de informação. Por exemplo, enquanto em V1 (Figura 24) a intérprete precisava traduzir o nome do produto, o valor e o botão adicionar ao carrinho em um único vídeo, tendo que apontar para indicar onde o usuário precisaria clicar, em V2 cada uma dessas informações possuía um vídeo independente, dispensando o apontamento e deixando o vídeo mais leve (Figura 26).
Figura 25 – Interface da segunda versão em Libras (V2)
Fonte: Elaborado pela autora.
Em relação ao pressuposto j, sobre a possibilidade de habilitar ou desabilitar os vídeos, foi inserido um ícone no topo das duas versões de sites em Libras para representar essa finalidade. Para tanto foi escolhido o símbolo
Acessível em Libras, criado pelo Centro de Comunicação (Cedecom) da Universidade Federal de Minas Gerais (UFMG) e que tem sido bastante utilizado pela comunidade surda para representar conteúdos acessíveis em Libras. Todavia, como o objetivo da pesquisa era testar os sites com a utilização dos vídeos, ao invés de desabilitá-los, o ícone abria um vídeo explicativo sobre a utilização da interface. Em uma situação real, entretanto, o ícone deveria cumprir a função de habilitar/desabilitar os vídeos.
Figura 26 – Interface da página de vendas de artigos esportivos para homens (V2)
Por último foi elaborada a versão do site com Ícones (projetotese. com.br/icone). Nesta versão, ao invés de vídeos em língua de sinais acompanhando o texto em português, foram dispostos ícones. No primeiro nível do menu, os ícones foram posicionados logo acima do texto, enquanto no segundo e no terceiro nível foram colocados no canto esquerdo do texto. Algumas páginas de conteúdo também possuíam ícones, como pode-se ver na Figura 27. Para a elaboração do design dos ícones utilizou-se o mesmo estilo gráfico já adotado para o site (Flat design). Já os critérios semânticos utilizados para a concepção dos ícones podem ser vistos na seção a seguir.
Figura 27 – Interface da versão com Ícones
5.3.3 Aplicação dos pressupostos semânticos nos conteúdos do site