Universidade de São Paulo

Instituto de Matemática e Estatística

Bachalerado em Ciência da Computação

Adnan Yulji Degaki

O uso de navegadores com rastreadores de olhar

São Paulo
Novembro de 2016
O uso de navegadores com rastreadores de olhar

Monografia final da disciplina

MAC0499 – Trabalho de Formatura Supervisionado.

Supervisor: Prof. Dr. Carlos Hitoshi Morimoto

São Paulo
Novembro de 2016
Resumo

A acessibilidade é um direito conquistado por pessoas portadoras de deficiência, com

mobilidade reduzida ou com outras dificuldades de acesso. Por em prática esse direito vem
se mostrando ser um grande desafio, ao demandar adaptações em produtos, serviços e in-
formações a pessoas com diferentes tipos ou grau de deficiência por meio das tecnologias
disponíveis. A realização dessas adaptações é fator chave para a promoção da integração
dessas pessoas, sendo a digital uma de suas formas mais importantes. O acesso a inter-
net, através de navegadores, vem contribuindo para o fortalecimento da integração entre
as pessoas por meio das redes sociais, e para o desenvolvimento e bem estar dos mesmos
por intermédio dos inúmeros serviços e informações disponibilizados. Sua privação impacta
fortemente no processo de integração digital, de modo que a promoção de uma forma mais
eficaz e acessível surgem como desafios de grande importância. Considerando a relevância
desse tipo de acesso e o fato de que navegadores são ferramentas de grande utilidade para
isso, neste trabalho, focamos na integração digital por meio de um navegador de internet
controlado pelo olhar. Para isso, projetamos e desenvolvemos, em código aberto, uma in-
terface alternativa controlada pelo olhar para navegadores - utilizando métodos de Design
Interativo - que oferece uma forma alternativa de interação ao realizar tarefas básicas ne-
cessárias para o uso da internet, possibilitando assim, o acesso às informações e serviços por
pessoas com deficiências motoras severas.
Palavras-chave: navegador, rastreador de olhar, design de interação, acessibilidade, inte-
gração digital.

i
Abstract

Accessibility is a right won by people with disabilities, reduced mobility or other access
difficulties. In practice, this right is proving to be a great challenge, demanding adaptations
in products, services and information to people with different types or degrees of disabi-
lity through the available technologies. The fulfillment of these adaptations is a key factor
for the promotion of the integration of these people, with digital integration being one of
its most important variants. Internet access through browsers has been contributing to the
strengthening of integration among people through social networks, and to the development
and well-being of them through the numerous services and information available. Its depri-
vation has a strong impact on the digital integration process, so that the promotion of a
more effective and accessible way presents a challenge of great importance. Considering the
relevance of this type of access and the fact that browsers are very useful tools for this, in this
work we focus on digital integration through a browser controlled by gaze. We designed and
developed, in open source, an alternative interface controlled by gaze for browsers - using
Interactive Design methods - that offers an alternative form of interaction when performing
basic tasks necessary for the use of the internet, thus, providing information and services
access to people with severe motor disabilities.
Keywords: browser, eye tracker, interaction design, accessiblity, digital integration.

iii
Sumário

1 Introdução 1
1.1 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Justificativa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Organização do texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Fundamentos 3
2.1 Interação pelo olhar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.1 História . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.2 Tipos de movimentos oculares e métricas . . . . . . . . . . . . . . . . 4
2.1.3 Formas de rastreamento de movimentos oculares . . . . . . . . . . . . 4
2.1.4 Calibração . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.5 Precisão e acurácia . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Navegadores da internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2.1 História . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2.2 Funcionamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3 Desenvolvimento 11
3.1 Métodos e ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 Design de interação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.1 Identificação dos usuários . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2.2 Necessidades do usuário e a formalização de requisitos . . . . . . . . . 12
3.2.3 Modelo conceitual e modelo físico . . . . . . . . . . . . . . . . . . . . 14
3.2.4 Desenvolvimento de designs alternativos e o processo de prototipagem 15

4 Avaliação 25
4.1 Protocolo de avaliação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.2 Análise e discussão dos resultados . . . . . . . . . . . . . . . . . . . . . . . . 26

5 Conclusões 31
5.1 Interface desenvolvida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.2 Uso de métodos de Design de Interação . . . . . . . . . . . . . . . . . . . . . 31

A Folha de instruções 33

v
vi SUMÁRIO

Referências Bibliográficas 35
Capítulo 1

Introdução

A acessibilidade é um direito conquistado por pessoas portadoras de deficiência, com

mobilidade reduzida ou com outras dificuldades de acesso. Por em prática esse direito vem
se mostrando ser um grande desafio, ao demandar adaptações em produtos, serviços e in-
formações a pessoas com diferentes tipos ou grau de deficiência por meio das tecnologias
disponíveis. A realização dessas adaptações é fator chave para a promoção da integração
dessas pessoas, sendo a digital uma de suas formas mais importantes. O acesso a inter-
net, através de navegadores, vem contribuindo para o fortalecimento da integração entre
as pessoas por meio das redes sociais, e para o desenvolvimento e bem estar dos mesmos
por intermédio dos inúmeros serviços e informações disponibilizados. Sua privação impacta
fortemente no processo de integração digital, de modo que a promoção de uma forma mais
eficaz e acessível surgem como desafios de grande importância.

1.1 Objetivos
Este trabalho objetiva criar uma forma mais eficaz e acessível de integração digital para
pessoas com deficiências motoras severas aumentando e/ou melhorando suas experiências
como usuários. Para isso, focamos na integração por meio de um navegador de internet
controlado pelo olhar. Exploramos formas alternativas de interação com o olhar e desenvol-
vemos uma interface controlada exclusivamente com os olhos por meio de um rastreador,
dispositivo que mede atividades oculares, considerando suas capacidades e limitações.
Estudar essas formas de interação exige identificar os tipos de atividades oculares medidos
pelos rastreadores, quais delas são relevantes para a aplicação, e quais são suas limitações.
O desenvolvimento da interface possui objetivos específicos estabelecidos por práticas da
área de Design de Interação tais como: identificação de usuários, suas necessidades, estabe-
lecimento de requisitos, desenvolvimento de designs alternativos, construção e avaliação de
versões interativas.
Não houve pretensão de se desenvolver um trabalho com resultados inéditos, visto que
interfaces que fazem uso de rastreadores de olhar já foram implementados e estão disponíveis

1
2 INTRODUÇÃO 1.3

ao público (e.g., GRID31 ). Além dos motivos já citados, a elaboração desse trabalho também
teve como foco, aspectos didáticos ao proporcionar condições para que o aluno adquira expe-
riência no uso de ferramentas de desenvolvimento de software, e em áreas inter-disciplinares
como o de Design de Interação e Engenharia de Software.

1.2 Justificativa
Na experiência como aluno do curso de Ciência da Computação, o contato do autor com
a área de Interação Humano-Computador (IHC) foi por meio do estudo de rastreadores de
olhar. Com base nisso, surgiu a proposta de estudo e desenvolvimento de uma interface para
navegadores por meio desse dispositivo. Este trabalho é relevante para aqueles que necessitam
de uma forma alternativa de uso de navegadores e também, através das experiências aqui
relatadas, para aqueles que pretendem projetar e desenvolver interfaces não convencionais,
além das tradicionais do tipo WIMP (Windows, Icon, Menu, Pointing Device).

1.3 Organização do texto

O capítulo 2 trata dos fundamentos que foram necessários para a compreensão e desenvol-
vimento deste trabalho. Dividida em duas seções, esse capítulo inicia-se com uma discussão
sobre os rastreadores de olhar, e em seguida, sobre os navegadores. No capítulo 3, discorre-se
sobre o desenvolvimento da interface com a definição das ferramentas a serem utilizadas e
métodos empregados. Uma descrição mais detalhada foi feita sobre os métodos da área de
Design de Interação aplicados durante o projeto que levaram a realização e avaliação dos
testes de usabilidade discutidas no capítulo 4. Por fim, o capitulo 5 mostra as conclusões
obtidas deste trabalho.

1
https://thinksmartbox.com/product/grid-3/
Capítulo 2

Fundamentos

Neste capítulo serão discutidos dois elementos fundamentais para a compreensão deste
trabalho. A primeira seção trata sobre os rastreadores de olhar: uma breve história, prin-
cipais métricas, o processo de calibração, e suas limitações; a segunda, discorrerá sobre os
navegadores.

2.1 Interação pelo olhar

2.1.1 História
A pesquisa sobre rastreamento do olhar precedeu o uso de computadores e tinha como
principal foco investigar os movimentos dos olhos (Javel (1878)). Os métodos pioneiros de
rastreamento eram um tanto quanto invasivos, alguns exigindo contato mecânico direto com
a córnea. Desde então, novas técnicas não invasivas foram desenvolvidas utilizando a reflexão
da luz. Em 1948, surgiu o primeiro rastreador do tipo head-mounted (Hartridge e Thompson
(1948)). A figura 2.1 mostra um rastreador desse tipo atualmente comercializado. Posteri-
ormente, rastreadores remotos também foram desenvolvidos (figura 2.1) e pesquisas relacio-
nando comportamentos dos olhos com processos cognitivos avançaram. Até então, a análise
de dados dos rastreadores não eram feitas em tempo real. Isso só foi possível com o surgi-
mento dos minicomputadores que iniciou a viabilidade da implementação de um sistema de
análise de dados em tempo real (Anliker (1976)). Esse evento abriu caminho para o estudo
da interação entre humanos e computadores (IHC) na década de 80, que se acelerou com
a popularização dos computadores pessoais. Atualmente, o estudo de rastreadores de olhar
está voltado para questões como usabilidade e sua utilização como dispositivo de entrada
para computadores.

1
http://core0.staticworld.net/images/article/2016/02/tobii-leftside-100644216-orig.jpg
2
https://pupil-labs.com/media/images/store_pupil/web/pupil_w120_e120.jpg

3
4 FUNDAMENTOS 2.1

Figura 2.1: À esquerda, um rastreador remoto (Tobii-eyeX1 ). À direita, um rastreador do tipo

head-mounted (Pupil2 )

2.1.2 Tipos de movimentos oculares e métricas

Um rastreador de olhar, de modo geral, mede os movimentos dos olhos, que podem
ser classificados de forma geral como fixações e sacadas. Uma fixação é a manutenção do
olhar num local, enquanto uma sacada ocorre quando o olhar se move para outra posição.
Uma sequência de fixações e sacadas corresponde a um caminho percorrido (scanpath). A
partir dessas definições, pode-se definir métricas a serem utilizadas no contexto de design
de interfaces ou avaliação de usabilidade como, por exemplo, a duração de uma fixação, que
pode indicar que um indivíduo possui dificuldades na leitura ou interesse em um determinado
objeto (Just e Carpenter (1976)). As especificações de um rastreador de olhar como, por
exemplo, sua taxa de amostragem pode impactar o dado a ser coletado. Rastreadores atuais
utilizam uma taxa de no mínimo 30Hz, que pode não ser suficiente para detectar movimentos
como sacadas, em que se recomenda uma taxa superior a 250Hz (Karn (2000)).

2.1.3 Formas de rastreamento de movimentos oculares

As metodologias de medição dos movimentos oculares geralmente caem em três categorias
que fazem uso de: eletro-oculografia (EOG), dispositivos fixados nos olhos e sensores ópticos.
A EOG é uma técnica que consiste na medição de sinais gerados pela diferença do poten-
cial elétrico de eletrodos postos em volta do olho. Essa técnica pode ser utilizada na medição
da posição do olhar através da interpretação desses sinais que são gerados pelos movimentos
oculares. Em técnicas que fazem uso de dispositivos fixados nos olhos, geralmente usam-se
lentes com bobinas para capturar sinais elétricos induzidos pelo seu movimento, gerado pela
movimentação dos olhos, num campo magnético. Esse tipo de técnica possui alta resolu-
ção temporal e espacial, porém, como desvantagem, apresenta a característica de ser muito
invasiva (Duchowski (2007)). Em contraste com o método anterior, rastreamentos por sen-
sores ópticos (geralmente câmeras de vídeo) não são invasivos e são de relativo baixo custo.
Utilizam-se técnicas que envolvem a detecção e medição de diferentes partes dos olhos ou
fenômenos sobre os olhos, por exemplo, o contorno da pupila, a posição do limbo e reflexões
sobre a córnea por meio de uma fonte luminosa, geralmente luz infravermelha.
2.1 INTERAÇÃO PELO OLHAR 5

2.1.4 Calibração
Em rastreadores baseados em vídeos, regiões, por exemplo, como o centro da pupila são
detectadas por meio de técnicas de processamento de imagens (figura 2.2). A posição desses
elementos detectados são correlacionadas com pontos que aparecem na tela. O usuário fixa
o olhar sobre esse ponto por um determinado tempo enquanto algumas amostras (posições)
são coletadas. Esse ajuste é denominado calibração e se repete por 9 a 13 vezes (figura 2.3)
para se conseguir uma calibração acurada sobre a tela (Goldberg e Wichansky (2003)).

Figura 2.2: Um processo simplificado de detecção da pupila: a região de interesse é identificada,

um detector de bordas é aplicado (e.g., Detector de Canny), segmentos de interesse são isolados a
partir dos quais uma elipse é ajustada.

Figura 2.3: No processo de calibração, o usuário fixa o olhar sobre pontos que aparecem sucessi-
vamente na tela. Em seguida, uma função de mapeamento é gerada e utilizada para calcular novas
posições do olhar.

Como resultado da calibração, uma função de mapeamento é gerada cuja entrada é a

6 FUNDAMENTOS 2.2

posição da pupila ou reflexão da córnea, e a saída é a posição sobre um plano 2D denominada

posição do olhar. A disponibilidade de coordenadas das posições do olhar ao longo do tempo
abre a possibilidade para inúmeras aplicações que vão desde o controle de cursores numa
tela de computador até a análise do comportamento de leitura de um indivíduo.

2.1.5 Precisão e acurácia

Como qualquer dispositivo de medição, rastreadores de olhar introduzem erros de precisão
e acurácia (figura 2.4). A acurácia de um rastreador, medida em grau de ângulo de visão é
a diferença média entre o que ele gera como posição do olhar e a real posição do olhar. Por
outro lado, a precisão é o grau de variação de um conjunto de medições. Um rastreador com
boa precisão calcula valores para uma mesma posição do olhar com menor variação possível.
A maioria dos rastreadores de olhar alcançam uma acurácia de 0,5 graus (Majaranta e Räihä
(2007)). Fabricantes declaram valores de precisão e acurácia que nem sempre são correspon-
didas na prática, possivelmente por se tratarem de dados medidos sob condições ideais. Por
exemplo, a fabricante do rastreador remoto Tobii X2-30 declara em suas especificações uma
acurácia de 0,40 grau e precisão de 0,26 grau1 porém, Clemotte et al. (2014) encontraram
valores superiores aos declarados: 2,46 graus de acurácia e 1,91 graus para precisão, em
condições não-ideais (sem usar um estabilizador de movimento da cabeça).

Figura 2.4: Erros de precisão e acurácia da posição do olhar em relação ao ponto central de um
objeto.

2.2 Navegadores da internet

Navegadores são aplicações em software usados para buscar, apresentar e enviar recursos
da internet. Esses recursos podem ser páginas da web, imagens, vídeos e documentos em
geral. Seu uso não se restringe somente ao acesso a internet, mas também para o acesso a
conteúdos de servidores de redes privadas e sistemas de arquivos.
1
http://www.tobiipro.com/product-listing/tobii-pro-x2-30/
2.2 NAVEGADORES DA INTERNET 7

2.2.1 História
Tim Berners-Lee inventou o primeiro navegador em 1990. Chamado de WorldlWideWeb
- posteriormente renomeado para Nexus para evitar confusão com termo que se refere ao
espaço de informação World Wide Web - esse navegador foi desenvolvido num computador
NeXT e já apresentava uma interface gráfica (figura 2.5).

Figura 2.5: Interface gráfica do navegador WorldWideWeb1 .

O acesso a web aumentou vertiginosamente com o lançamento do Mosaic em 1993, um

navegador gráfico fruto de um projeto liderado por Marc Andreesen na NCSA (Centro Na-
cional de Aplicações de Supercomputação). Andreesen posteriormente fundou a companhia
Netscape Communication Corporation em 1994. Com muita influência do Mosaic, lançou o
navegador Netscape, que rapidamente se popularizou, chegando a representar 80% do mer-
cado em 1995. Nesse mesmo ano, a Microsoft lançou o Internet Explorer, navegador também
influenciado pelo Mosaic, dando início ao que foi posteriormente chamado de Guerra dos
Browsers - período entre 1995 a 1999 que foi marcado pelo embate entre os dois navegadores
pelo mercado. A Netscape perde a liderança para a Microsoft, que em 1999 passa a ocupar
mais de 80% do mercado. O crescimento do Internet Explorer nesse período foi alavancado
pela estratégia da Microsoft de fornecê-lo em conjunto com seu sistema operacional Windows
1
https://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gif
8 FUNDAMENTOS 2.2

95, que passou por uma mudança radical em sua interface sendo seu lançamento amplamente
divulgado pela mídia.
Outros navegadores surgiram durante esse período como o Opera em 1996, com a pro-
posta de ser rápido e pequeno, e o Firefox produzida pela Mozilla Foundation, uma or-
ganização sem fins lucrativos fundada pela Netscape como uma tentativa de produzir um
navegador competitivo seguindo o modelo de código aberto. Este último atingiu um cresci-
mento significativo, chegando a ocupar 32,5% do mercado em 2009.
A Apple lançou seu navegador Safari em 2003 e conseguiu atingir uma fatia significativa
do mercado devido a popularidade de seus computadores e dispositivos móveis. Em 2008,
a Google lança no mercado o navegador Chrome, tendo um crescimento exponencial nos
primeiros anos e assumindo a liderança em 2012 ao ultrapassar o Internet Explorer. Em abril
de 2016, Chrome passou a ocupar mais de 50% do mercado de navegadores sem mostrar sinais
de enfraquecimento. Recentemente, com o objetivo de recuperar grande parte do mercado
perdido, a Microsoft lançou, em conjunto com seu mais novo sistema operacional Windows
10, o Microsof Edge, navegador que passou a substituir o Internet Explorer como linha de
frente nesse setor.

2.2.2 Funcionamento
A função base de um navegador, que foi o motivo para o seu surgimento, é a de buscar
informações e mostrá-las para o usuário de uma forma que ele possa ‘navegar’ na web. As
informações são acessadas em diversos formatos como: páginas, imagens, vídeos e outros
arquivos. Cada um desses recursos são referenciados por um identificador denominado URI
(Identificador Uniforme de Recursos) a partir do qual clientes e servidores se comunicam
para solicitá-los ou enviá-los. Assim, por exemplo, o endereço:

https://www.linux.ime.usp.br/~adnan/mac0499/

corresponde ao URI de uma página da web que, neste caso, faz uso do protocolo HTTPS de
comunicação. Recebido o recurso, cabe ao navegador mostrá-lo de uma forma apropriada.
Uma página da web é descrita por uma linguagem de marcação HTML (Linguagem de
Marcação de Hipertexto) podendo vir acompanhada de informações de formatação (e.g.
CSS) e de comportamento (e.g. javascript). Essas informações são processadas pelo motor de
renderização dos navegadores resultando num documento interativo para o usuário. Páginas
renderizadas podem referenciar outros recursos da web por meio de hyperlinks, estruturas
que contém os URIs de seus recursos associados e que devem ser acionadas por cliques,
toques ou sobreposição de cursores.
Os navegadores mais populares tipicamente apresentam as seguintes características em
comum:

• Janelas e abas para mostrar os recursos requisitados.

2.2 NAVEGADORES DA INTERNET 9

• Botões de avançar, voltar e recarregar páginas.

• Barra de endereços para a entrada de um URI.

• Barra de busca de termos utilizando um determinado motor de busca

• Barra de status que mostra o progresso das requisições

• Capacidade de redimensionamento da página (zoom).

• Inserção, acesso e remoção de páginas na categoria favoritos.

• Consulta ao histórico de páginas previamente visitadas.

• Espaço para renderização de páginas (viewport).

• Ferramentas para desenvolvimento web.

Alguns navegadores também fornecem suporte para o desenvolvimento de plug-ins que

extendem suas funcionalidades ao disponibilizar uma API para os desenvolvedores.
Atualmente, navegadores são utilizados para várias funções, como entretenimento, comu-
nicação, trabalho e integração social. Dada a importância dessa ferramenta, sua integração
com um rastreador de olhar abre a possibilidade de promover a inclusão digital de pessoas
previamente negligenciadas devido as suas limitações físicas. A próxima seção descreve os
passos que levaram ao desenvolvimento de uma interface para um navegador que permite
seu controle por meio de um rastreador de olhar.
Capítulo 3

Desenvolvimento

3.1 Métodos e ferramentas

Inicialmente, para o desenvolvimento da interface, foi discutida a possibilidade de se pro-
jetar e implementar um navegador com interface adaptada ao controle pelo olhar. Essa opção
foi desconsiderada após serem levantados fatores como tempo disponível para treinamento e
desenvolvimento, escopo do trabalho e manutenibilidade da implementação. Definiu-se que
o desenvolvimento de uma interface como uma extensão de um dos navegadores seria o mais
apropriado para os propósitos do trabalho. Um dos fatores para essa decisão foi a disponibi-
lidade de APIs e documentações para o desenvolvimento de extensões. Essa escolha também
delega grande parte das tarefas relacionadas a manutenibilidade do sistema aos próprios
desenvolvedores dos navegadores. O navegador escolhido para desenvolver a extensão foi o
Chrome, por motivos que vão desde a alta disponibilidade de documentação e outros ma-
teriais na web, até o fato de grande parte dos usuários utilizarem esse navegador (mais de
50% em 2016).
O desenvolvimento da extensão exigiu o conhecimento de algumas tecnologias front-
end como javascript, HTML e CSS. A linguagem javascript por ser multiparadigma oferece
recursos diversos para a implementação de um software. Visando a organização do código
para diminuir o acoplamento entre os módulos e melhorar sua manutenção e desenvolvimento
foi adotado o paradigma de orientação a objetos, mas recursos da linguagem funcional foram
amplamente utilizados. Práticas oriundas da Engenharia de Software foram consideradas ao
utilizar ferramentas (e.g. estudo de caso) e alguns padrões de projetos. Muitos métodos da
área de Design de Interação foram aplicados e serviram como um guia durante todas as fases
do projeto, portanto serão descritas com maiores detalhes a seguir.

3.2 Design de interação

O desenvolvimento da interface proposta baseou-se em práticas de design de interação,
definido por Preece et al. (2002) como o processo de desenvolvimento de produtos interativos

11
12 DESENVOLVIMENTO 3.2

que auxiliam pessoas no seu cotidiano, em particular, gerando experiências aos usuários que
melhoram e estendem a forma como pessoas trabalham, comunicam e interagem. Trata-se
de um processo iterativo, em que inicialmente uma reflexão deve ser feita sobre o problema
a ser tratado e requisitos do usuários devem ser identificados. Um segundo passo consiste em
coletar informações a respeito das necessidades do usuário e os problemas que ele encontra
ao conduzir suas atividades. Em seguida, deve-se continuar a raciocinar sobre os requisitos
que conduziram aos modelos conceituais da interface. Uma etapa mais avançada consiste em
materializar alguns dos modelos conceituais na forma de protótipos, que devem ser avaliados
para verificar se as necessidades do usuário foram atendidas.

3.2.1 Identificação dos usuários

A primeira questão a ser respondida nesse processo é: quem são os usuários? Uma das
proposta desse trabalho é desenvolver uma ferramenta que permita o controle de navegadores
por meio de movimentos dos olhos, que foi concebida a partir da constatação da existência
de indivíduos que necessitam de uma forma de interação diferente das mais tradicionalmente
utilizadas. Esses indivíduos compreendem aqueles cujos movimentos estão comprometidos
para utilização de dispositivos convencionais (e.g., mouse, teclado físico, telas de toque),
sejam por problemas físicos ou por estarem inseridos em determinados contextos. Mesmo
assim, esse grupo é composto por pessoas com graus variados de mobilidade, por exemplo,
algumas conseguem movimentar suas mãos, mas com pouca precisão; outras nem mesmo
conseguem controlá-las. Em vista disso, considerou-se para este projeto e estudo, o desen-
volvimento de uma forma de controle capaz de ser executada a partir de uma situação
extrema de ausência de mobilidade, com exceção dos movimentos dos olhos.

3.2.2 Necessidades do usuário e a formalização de requisitos

Identificado o usuário, surge uma nova questão: quais são suas necessidades? Identificar
necessidades é um passo fundamental para a tomada de decisões sobre a interface. Muitas
vezes o próprio usuário não sabe quais são suas necessidades, cabe ao projetista identificá-las
baseado no entendimento das características e capacidades do usuário. A consideração de
uma de suas características físicas, como a presença de habilidades motoras comprometidas,
levou a decisão de se utilizar um rastreador de olhar como o dispositivo de entrada mais
adequado. Em relação ao uso de navegadores, o que essa aplicação precisa oferecer para
atender as necessidades do usuário? Quais são as tarefas fundamentais ao se utilizar esse
tipo de aplicação? Restringindo as funcionalidades dos navegadores as seguintes tarefas:
enviar, buscar e exibir recursos da web, foram identificadas as seguintes funções:

• selecionar objetos da página (links, botões, caixas de texto)

• entrar em páginas a partir de seus endereços

3.2 DESIGN DE INTERAÇÃO 13

• digitar textos breves (como URLs ou palavras de busca)

• avançar,voltar e recarregar páginas

• paginar conteúdos na tela do computador (scrolling de páginas)

A identificação das necessidades contribui para o estabelecimento de requisitos: enunciados

sobre o produto em desenvolvimento que especifica o que ele faz e como ele se comporta.
Todas as tarefas anteriormente listadas a respeito de navegadores podem ser consideradas
requisitos funcionais, ou seja, aqueles que capturam o que a interface deve fazer. Um requisito
deve ser o mais claro possível, evitando ambiguidades. De acordo com uma pesquisa, um dos
principais motivos de muitos projetos falharem foi devido ao estabelecimento de requisitos
não muito claros e detalhados (Taylor (2000)). Um tipo de requisito de grande importância
para a interface é a de caráter ambiental, que define qual tecnologia o produto vai utilizar
e quais limitações são relevantes. A interface fará uso do rastreamento do olhar que, como
mencionado no capítulo 2, possuem limitações de precisão e acurácia. A partir desse requisito,
deriva-se um outro relacionado ao tipo de dado a ser utilizado: a interface deve receber como
entrada as posições do olhar obtidas a partir do rastreador. Com o objetivo de identificar
novos requisitos, a seguir, será discutida a análise de tarefas como uma forma de alcançá-lo.

Análise de tarefas

A análise de tarefa compreende um conjunto de técnicas para investigar processos cogniti-

vos e ações físicas em um nível alto de abstração (Preece et al. (2002)). A análise hierárquica
de tarefas é a sua versão mais utilizada e consiste em quebrar uma tarefa em subtarefas que,
por sua vez, podem ser desdobradas em outras subtarefas, e assim por diante. As tare-
fas resultantes são agrupadas num plano que especifica o que deve ser feito para realizar
a tarefa principal. Esse tipo de análise é usada principalmente para investigar uma situa-
ção já existente e foi utilizado originalmente para identificar necessidades de treinamento
(Annett e Duncan (1967)), mas neste caso, será usado para descrever o processo que levou
a criação do modelo conceitual da interface. Nos estágios iniciais de desenvolvimento, o des-
trinchamento em subtarefas ocorreu de forma natural, a análise não foi feita formalmente,
mas para fins de clareza, esse tipo de análise será utilizado.
Um requisito funcional identificado foi a de selecionar um objeto na página mostrada no
navegador. Para completar essa tarefa, uma fixação dos olhos deve ocorrer sobre o objeto
a ser selecionado, a interface identifica esse padrão de movimento e, em seguida, o usuário
deve confirmar a seleção:

0. Para selecionar um objeto da página

1.fixe o olhar sobre o objeto a ser selecionado

2.confirme a sua seleção

14 DESENVOLVIMENTO 3.2

Esse processo levanta questões a respeito de como a interface detectará e como o usuário
saberá quando ocorreu uma fixação, e de que forma a confirmação da seleção será feita.

3.2.3 Modelo conceitual e modelo físico

O design conceitual envolve a transformação de requisitos e necessidades dos usuário em
um modelo conceitual. Preece et al. (2002) definem modelo conceitual como uma descrição
do sistema proposto em termos de um conjunto de ideias e conceitos sobre o que ele deve
fazer, comportar e parecer, devendo ser claro para os usuários da forma intencionada. A
base para a elaboração do modelo conceitual são as tarefas identificadas na forma de re-
quisitos funcionais. A etapa, anteriormente discutida, sobre a identificação de subtarefas faz
parte desse processo ao auxiliar na clareza das ideias e dos conceitos para os usuários, e
como resultado, novas questões emergem. Como a fixação será detectada? Anteriormente,
estabeleceu-se que um dos requisitos de dado da interface compreende as posições do olhar
fornecidas pelo rastreador. Essas posições podem ser representadas em coordenadas x,y em
um plano 2D correspondente a tela do computador. Estabeleceu-se então que a detecção da
fixação ocorrerá a partir de dois parâmetros:

• limiar espacial: valor máximo da variação da posição do olhar.

• limiar temporal: tempo mínimo para detectar uma fixação

Figura 3.1: Detecção de uma fixação: se a posição do olhar estiver dentro do limiar espacial por
um período superior ao limiar temporal, uma fixação será detectada (área amarela).

Se a posição do olhar estiver dentro do limiar espacial por um período superior ao limiar
temporal, uma fixação será detectada. A proposta do modelo conceitual é ser claro e ao
mesmo tempo manter um nível alto de abstração, mas observa-se que nesta etapa, algumas
decisões de implementação começaram a tomar forma. Questões mais concretas e detalhadas
relacionadas ao design da interface fazem parte do design físico, que também engloba decisões
como o tipo de estruturas que serão implementadas (e.g., botões, barras de rolamento) e
combinações de cores do layout da interface.
3.2 DESIGN DE INTERAÇÃO 15

3.2.4 Desenvolvimento de designs alternativos e o processo de pro-

totipagem
A medida que o modelo conceitual vai amadurecendo torna-se necessário criar versões
interativas do design a ser construído denominadas protótipos. A função da prototipagem é
a de fornecer um meio para os usuários avaliarem o design do produto interativo. No estágio
inicial de desenvolvimento foram utilizados protótipos de baixa fidelidade como esboços em
papel e lousa, protótipos desse tipo possuem baixo custo e rapidez na construção, fatores
importantes nesta etapa, pois muitas ideias aparecem e, na mesma velocidade, são descar-
tadas. Também foram desenvolvidos mockups, versões que se assemelham ao projeto final,
porém com funcionalidades limitadas, que serviram como protótipos para uma avaliação
mais rigorosa (figura 2.3).

Figura 3.2: Mockup mostrando o menu de navegação e de funcionalidades extras da interface.

Retornando à questão da seleção de objetos da página carregada pelo navegador, deve-

se considerar, no momento da implementação do protótipo, as limitações dos rastreadores
de olhar. Se a precisão e acurácia desses dispositivos fossem de zero grau, e supondo que o
usuário tivesse um controle exato do olhar, bastaria fixar o olhar sobre o objeto que se deseja
selecionar, e este seria identificado pela interface e, em seguida, confirmado pelo usuário para
seleção. Porém, como visto no capítulo 2, rastreadores podem ter precisão e acurácia maiores
que 1 grau. A uma distância de 65 cm, 1 grau corresponde a um erro médio de 11 mm, isto é,
a interface não conseguiria detectar o objeto a ser selecionado, se outros objetos (e.g., links,
botões) também estivessem dentro da área de erro do rastreador. A figura 3.3 retrata esse
problema, em que todos os objetos dentro da área de erro do rastreador, aqui denominados
objetos candidatos, devem ser identificados.
Percebe-se que o usuário não mais terá que somente fixar o olhar sobre o objeto e con-
16 DESENVOLVIMENTO 3.2

Figura 3.3: Situação de ambiguidade de seleção de objetos (links): mais de um objeto está dentro
da área de erro da posição do olhar (círculo vermelho).

firmar a seleção, pois mais de um objeto pode ser selecionado. Essa constatação leva a
modificação do modelo conceitual inicialmente concebido. Ainda podemos considerar que se
o objeto a ser selecionado for o único candidato (sem ambiguidade), basta o usuário confir-
mar a seleção, caso contrário, algum procedimento deve ser criado. Nesse caso, a técnica de
casos de uso (Jacobson et al. (1992)) pode ser utilizada para descrever essas tarefas:

1. O usuário fixa o olhar sobre o objeto a ser selecionado.

2. O usuário confirma a seleção.

3. O sistema procede de acordo com o objeto selecionado.

Percurso alternativo:

2. Se mais de um objeto for selecionado.

2.1 O sistema mostra os objetos de forma não ambígua.

2.2 O usuário seleciona um objeto.

2.3 O sistema retorna ao passo 3.

O passo 2.1 descreve uma solução desse problema, ao exigir do sistema uma nova repre-
sentação sem ambiguidade dos objetos candidatos. Uma nova representação, por sua vez,
exige uma revisão do modelo físico. A ideia por trás da criação de representações de ob-
jetos é a de transformá-los numa forma robusta aos erros da posição do olhar. A escolha
do projeto foi por meio de áreas de acionamento (botões) com dimensões suficientes para
serem selecionados sem ambiguidade. Um link, por exemplo, é representado por um botão
com tom amarelado e a sua descrição (se tiver) em seu interior; caixas de texto aparecem
na cor verde (figura 3.4).

Paradigma de seleção de objetos

É oportuno, nesta etapa, discutir sobre a forma de ativação desses botões, pois o mesmo
mecanismo será utilizado em outras funcionalidades da interface. Há diferentes formas de
selecionar um objeto, a mais comum, para pessoas com deficiências motoras severas, a me-
lhor e frequentemente utilizada é o por tempo de latência (dwell time) (Majaranta e Räihä
3.2 DESIGN DE INTERAÇÃO 17

Figura 3.4: Objetos candidatos são representados por botões com características distintas de acordo
com o seu tipo (links, botão de submissão e caixa de texto)

(2007)), que consiste no usuário manter o olhar fixo sobre um objeto por um determinado
período de tempo para selecioná-lo. Durante esse período, o objeto estará em foco; se o olhar
se mover para outro objeto a ação é cancelada, caso contrário, passado o tempo pré-definido,
o objeto será selecionado. Esse mecanismo, muitas vezes é acompanhado de um feedback vi-
sual para que o usuário saiba o estado em que se encontra esse processo. A figura 3.5 mostra
esse feedback no formato de uma barra horizontal que muda de cor com o passar do tempo
de latência.
Durante a fase de implementação, foi constatado um possível problema com o qual usuá-
rios poderiam deparar. Vamos supor que o usuário fixe o olhar sobre um botão, por mais que
esse objeto tenha uma dimensão suficiente para eliminar o erro de sua seleção na maioria
dos casos, ainda existirá a situação em que a posição do olhar não estará sobre o objeto
mesmo que o usuário esteja olhando para o mesmo (veja a figura 3.6). Esse caso entra em
conflito com a eficácia da seleção do objeto, um dos objetivos da usabilidade de uma inter-
face. Para amenizar essa possibilidade, uma área maior que a aparente do objeto de ativação
foi determinada para cada objeto. Dessa forma, o erro de seleção é amenizado.
18 DESENVOLVIMENTO 3.2

Figura 3.5: Quando o olhar está sobre o objeto, este passa a estar em foco. Passado o tempo de
latência, o objeto é selecionado. Um feedback visual em formato de barra horizontal foi utilizado
para representar o tempo de latência decorrido.

Figura 3.6: O botão esquerdo mostra a situação em que este não é selecionado devido ao erro da
posição do olhar. Esse problema pode ser contornado por meio da criação de uma área de ativação
invisível maior que a área do objeto (botão direito).

Etapas da seleção de um objeto

A figura 3.7 ilustra as etapas para a seleção de um objeto que, a seguir, serão descritas. A
todo instante, fixações são detectadas pela interface, como feedback para que o usuário saiba
quais são os objetos candidatos calculados pela fixação ocorrida, pontos vermelhos semi-
transparentes aparecem próximos a esses objetos. Se o usuário tiver a intenção de selecionar
um objeto, o botão de clique do menu lateral da interface deve ser ativado por tempo de
latência. Ocorrendo a ativação, representações de cada objeto candidato são construídos e
dispostos verticalmente num novo menu lateral que dispõe de barras de rolamento verticais
para acessar, se necessário, os botões não visíveis. Cada objeto candidato da página recebe
um marcador com números de identificação correspondentes aos que se encontram nos seus
respectivos botões representativos. O usuário procura o botão que deseja clicar com o auxílio
dos marcadores gerados e das descrições textuais localizadas em cada botão. Encontrado o
botão do objeto a ser selecionado, sua seleção é feita por tempo de latência, caso contrário,
a ação de seleção pode ser cancelada ativando a área de cancelamento do menu (vermelha).

Teclado virtual

A seleção de uma caixa de texto deve ser acompanhada de uma sequência de passos
que permita a entrada de textos pelos usuários. Essa ação se dá, tipicamente, por meio de
teclados, dispositivos que dispõem de teclas associadas ao seus respectivos símbolos cuja
ativação dispara o evento da entrada dos mesmos para o sistema associado. Para a interface
em consideração, a implementação de um teclado virtual ativado por tempo de latência foi
3.2 DESIGN DE INTERAÇÃO 19

Figura 3.7: a) Ocorrência de uma fixação (círculo verde representa a posição do olhar). b) Marca-
dores vermelhos aparecem a cada fixação para informar ao usuário sobre os objetos candidatos. c) O
botão de clique (verde) é ativado por tempo de latência. d) Representações de cada objeto candidato
são construídas na forma de botões (no menu lateral). O usuário busca o botão desejado ativando-o
também por tempo de latência.

o escolhido (figura 3.8). As razões para isso vão desde sua simplicidade de implementação
até pelo fato de se assemelhar a um teclado físico comumente utilizado. Assim, quando uma
caixa de texto é selecionada, o teclado virtual aparece no navegador a disposição para a
entrada de caracteres.

Menu de navegação

A implementação dos requisitos funcionais de entrada de endereços de páginas, recuo,

avanço e recarregamento de páginas foi realizada por meio de botões acionados por tempo
de latência e dispostos em uma área que possibilitasse suas distinções da página visitada.
Numa etapa mais avançada do projeto, foi identificada uma nova funcionalidade que não
estava descrita nos requisitos iniciais e que foi implementada: a adição da página aos favoritos
(figura 3.10). O menu de navegação é mostrado ao usuário após o acionamento de um botão
no menu lateral da interface (figura 3.9).

Rolamento de páginas

O rolamento de página foi implementado por meio de áreas que são acionadas por simples
sobreposição do cursor sobre elas (figura 3.11). Enquanto sobrepostas, a ação de rolamento
da página procede até a chegada de seu limite.
20 DESENVOLVIMENTO 3.2

Figura 3.8: Teclado virtual acionado por tempo de latência utilizado para entrada em caixas de
texto de páginas e de endereços de páginas.

Funcionalidades extras

Além das funcionalidades básicas para navegação já citadas, navegadores permitem fun-
cionalidades secundárias que, embora não sejam fundamentais, podem melhorar sua usabi-
lidade e a experiência do usuário. Dentre elas, se encontra a opção de marcar uma página
como favorito do menu de navegação. Com o objetivo de permitir esse tipo de expansão
na interface, foi implementado um menu de funcionalidades extras (figura 3.12). Esse menu
consiste de botões que ativam suas respectivas funções por tempo de latência.
A função de consulta das páginas recentemente marcadas foi implementada fazendo uso
desse menu (figura 3.13). Seguindo a mesma ideia de mudar a representação de um objeto,
cada bookmark passa a ser um botão com sua descrição e favicon. Cada botão é ativado
por tempo de latência. A remoção de um bookmark é feita através das seguintes etapas em
sequência: seleção do botão de remoção e seleção do botão de confirmação (ver figura 3.13).
A decisão de duas etapas na remoção priorizou a segurança da interface (um dos objetivos da
usabilidade); a remoção em uma etapa pode aumentar a eficiência dessa tarefa, ao custo de
diminuir sua segurança (remoção indesejada do elemento) e afetar a experiência do usuário.

Configurações da interface

A configuração da interface (settings) é visualizada através do menu de funcionalidades

extras. Há dois parâmetros cujos valores podem ser determinados: tamanho mínimo do
botão e tempo de latência. A interface permite que o usuário teste as mudanças feitas
antes de salvá-las definitivamente. Essa área de teste consiste de botões cujas dimensões são
modificadas a medida que o usuário modifica o parâmetro de tamanho mínimo, e que podem
3.2 DESIGN DE INTERAÇÃO 21

Figura 3.9: O botão amarelo do menu lateral da interface é ativado por tempo de latência, sendo
responsável por mostrar o menu de navegação.

ser selecionados utilizando o tempo de latência determinado (ver figura 3.14).

22 DESENVOLVIMENTO 3.2

Figura 3.10: Menu de navegação com as funções de entrada de URL (botão superior), recuo
e avanço de página (botão esquerdo e direito respectivamente), recarregamento de página (botão
central) e adição da página aos favoritos (botão inferior).

Figura 3.11: Quando sobrepostas pelo cursor (posição do olhar), a área de rolamento (azul) é
acionada e o rolamento da página (para cima ou para baixo) é realizado.
3.2 DESIGN DE INTERAÇÃO 23

Figura 3.12: Menu de funcionalidades extras (a direita): possibilidade de implementar novas fun-
cionalidades como, por exemplo, a de configuração da interface e a de ver páginas recentemente
marcadas.

Figura 3.13: Menu mostrando páginas recentemente marcadas com opção de remoção em duas
etapas: ao selecionar o botão de remoção (vermelho), o botão de confirmação (inicialmente cinza)
é ativado tornando-se verde.
24 DESENVOLVIMENTO 3.2

Figura 3.14: A configuração da interface permite determinar o tamanho mínimo de um botão de

ativação e o tempo de latência (dwell time) da interface que podem ser testados na área de testes
(botões alvos). As configurações são persistidas pelo acionamento do botão de salvar configurações
(verde).
Capítulo 4

Avaliação

Foram conduzidos dois tipos de testes para avaliação da interface desenvolvida. Nos es-
tágios iniciais de implementação, foi dado ênfase ao testes informais sobre os protótipos, que
consistiram em permitir que usuários experimentassem a interface sem nenhuma orientação
prévia acompanhados de diálogos com o desenvolvedor. Esses diálogos e a observação do com-
portamento dos usuários forneceram feedback para o redesign do sistema. Posteriormente,
um teste de usabilidade formalizado foi conduzido.

4.1 Protocolo de avaliação

O teste consistiu nos usuários completarem uma série de tarefas estruturadas que foram
projetadas para testar uma funcionalidade particular da interface (baseado em um estudo
de caso discutido por Preece et al. (2002)). Cinco pessoas, quatro homens e uma mulher,
com idades entre 26 e 32 anos, se voluntariaram para participar do teste. Todos tinham ex-
periência em utilizar navegadores e costumavam acessar a internet por quatro ou mais horas
por dia. Para o teste, utilizou-se o rastreador de olhar remoto EyeX da Tobii, rodando em
Windows 10 no navegador Chrome (versão 53.0.2785.101) em um monitor de 23.5". Os parti-
cipantes foram instruídos a participar de um teste de usabilidade de uma interface chamada
Ocular Navigator Extension, que permite a navegação na web com os olhos. Inicialmente o
rastreador de olhar foi calibrado para o usuário em teste. Em seguida, dez minutos foram da-
dos para a exploração do sistema. Esta etapa se assemelhou bastante com os testes informais
anteriormente conduzidos em relação a possibilidade de os voluntários poderem expressar o
que eles estavam achando ou sentindo no momento do teste. Passados os dez minutos, os
participantes foram instruídos a completarem as tarefas descritas numa folha de instruções
(apêndice A). A realização das tarefas objetivaram avaliar as seguintes funcionalidades:

• configuração da interface

• entrada de endereço de uma página

• uso dos recursos voltar, avançar e recarregar página

25
26 AVALIAÇÃO 4.2

• bookmarks

• rolamento de páginas

• click de links

• entrada e submissão de texto

Após completarem o teste, os participantes tiveram que pontuar o seu desempenho em

cada uma das tarefas realizadas numa escala de 1 a 3 (1 = fácil, 2 = ok, 3 = difícil) e,
em seguida, com o objetivo de coletar informações de suas experiências com a interface,
responder a um questionário com as seguintes perguntas:

• O que você gostou da extensão?

• O que você não gostou da extensão?

• O que você achou confuso ou difícil de usar da extensão?

• O que você sugere para melhorar?

4.2 Análise e discussão dos resultados

Os dados coletados foram organizados numa tabela de forma a possibilitar uma análise
holística entre todos os participantes e tarefas realizadas (tabela 4.1). Observa-se, por essa
tabela, que tarefas como a adição de uma página como favorito e rolamento de páginas foram
facilmente executadas pelos usuários, porém outras foram desempenhadas com certo grau de
dificuldade. Tarefas que tiveram uma pontuação acima de 1,5 foram analisadas com maior
rigor em conjunto com as experiências relatadas pelos usuários através do questionário, e as
observações feitas durante o experimento. Baseado nesse critério, as seguintes tarefas serão
aqui discutidas:

1. Salvar a configuração e sair do modo configurações

2. Acionar o botão de entrada de endereços

3. Entrar num endereço qualquer por meio do teclado

4. Buscar a página marcada como favorita e selecioná-la

5. Deletar a página recém marcada como favorita

6. Selecionar o segundo resultado da página (link )

7. Selecionar a caixa de texto

8. Digitar um texto
4.2 ANÁLISE E DISCUSSÃO DOS RESULTADOS 27

Participante: 1 2 3 4 5 Média
Informações
Sexo F M M M M 1F, 4M
Idade 26 27 26 31 32 28,4
Horas na web por dia - 6 6 6 4 5,5
Tarefas
Acesse o botão de configurações (Settings) 1 2 1 1 1 1,2
Configure os parâmetros da interface 1 1 2 1 2 1,4
Teste a configuração 1 1 1 1 2 1,2
Salve a configuração e saia do modo configurações 1 3 2 1 1 1,6
Acione o botão de entrada de endereços 3 2 2 1 1 1,8
Entre num endereço qualquer por meio do teclado 2 2 3 2 2 2,2
Volte para a página anterior 1 1 2 1 1 1,2
Avance uma página 1 1 2 1 1 1,2
Recarregue a página 1 1 2 1 1 1,2
Marque a página como favorito 1 1 1 1 1 1,0
Busque a página marcada e selecione-a 1 3 2 1 1 1,6
Delete a página recém marcada 3 3 2 1 2 2,2
Vá para o final da página 1 1 1 1 1 1,0
Vá para o início da página 1 1 1 1 1 1,0
Selecione o segundo resultado da página 2 2 2 1 1 1,6
Selecione a caixa de texto 3 2 1 1 1 1,6
Digite um texto e saia do modo teclado 2 2 3 2 3 2,4
Selecione o botão de submissão 3 2 2 3 3 2,6
Média do Participante: 1,6 1,7 1,8 1,2 1,4

Tabela 4.1: Dados coletados dos participantes durante o teste de usabilidade. Cada participante
pontuou seu desempenho para cada tarefa realizada. 1 = fácil, 2 = ok, 3 = difícil (em negrito =
precisou de ajuda)
28 AVALIAÇÃO 4.2

9. Selecionar o botão de submissão

A dificuldade observada na tarefa (1) foi a necessidade do usuário lembrar que se deve aci-
onar o botão de salvar as configurações antes de sair do modo configurações (ver figura 3.14).
Isso pode levar ao indesejado caso de se perder as modificações efetuadas ao sair do modo
configuração sem ativar o botão de salvar configurações. Uma possível solução para esse caso
seria a interface mostrar uma tela de confirmação das mudanças realizadas no momento em
que o usuário optar por sair do modo configurações.
Alguns usuários tiveram dificuldades em acionar o botão de entrada de endereços de
páginas (botão superior do menu de navegação, ver figura 3.10). O uso de um ícone como
identificador dessa função gerou confusão em associá-lo com a sua funcionalidade, o que
não aconteceu com os botões de avançar, recuar, recarregar e favoritar páginas. Uma reco-
mendação para esse caso seria a de mostrar uma descrição textual junto com o ícone do
botão. Outro fator que interferiu no desempenho de um usuário foi a constatação deste estar
habituado a acessar uma determinada página por meio de um motor de busca.
A citação das tarefas (3) e (8) estão relacionadas. Três dos participantes relataram des-
conforto ao utilizar o teclado, mencionando a velocidade de digitação como fator principal.
Atualmente, existem teclados com velocidades superiores ao que foi implementado que faz
uso de recursos de predição de palavras e feedback visual para minimizar os movimentos
dos olhos (Diaz-Tula e Morimoto (2016)). Focar na modularidade no projeto da interface,
permitindo o acoplamento de diferentes tipos de teclados, mostra-se como uma solução para
esse problema.
As tarefas (4), (5), (6), (7) e (9) obtiveram pontuações altas devido às seleções acidentais
de objetos, i.e. o problema do Toque de Midas (Jacob (1990)). A sobreposição do cursor
correspondente ao olhar sobre um objeto imediatamente ativa o mecanismo de tempo de
latência. Quanto menor esse tempo, mais rápido será a seleção do objeto, porém menor
será a janela de tempo disponível para o usuário tomar decisões como observar e cancelar a
seleção do objeto. Esse problema, inerente do paradigma escolhido, pode ser amenizado por
meio de treinamentos dos usuários com a interface e o rastreador de olhar, ou por aumento
do tempo de latência (customizável no modo de configurações da interface). Uma solução
alternativa seria a de mover as descrições textuais dos botões para fora da área clicável
como constatado por Penkar et al. (2012), dessa forma, ocorreria a separação das etapas de
observação e seleção do objeto, minimizando significativamente cliques indesejáveis. Uma
versão interativa alternativa foi desenvolvida aplicando essa configuração (ver figura 4.1).
Uma tarefa que se mostrou difícil de ser realizada foi a de submeter um texto a partir
da seleção do seu respectivo botão de submissão. Para execução dessa tarefa, o usuário teve
que seguir os seguintes passos: selecionar uma caixa de texto, digitar um texto, sair do
modo teclado e, finalmente, selecionar o botão de submissão. Essa quantidade de etapas foi
criticada. Como melhoria, a opção de capturar o evento da tecla enter no modo teclado para
submeter o texto digitado possivelmente eliminaria a necessidade de selecionar o botão de
4.2 ANÁLISE E DISCUSSÃO DOS RESULTADOS 29

Figura 4.1: Versão interativa alternativa: descrições textuais fora de seus respectivos botões (áreas
de ativação por tempo de latência) para minimizar cliques acidentais.

submissão, pois muitas páginas da web atualmente são projetadas para aceitar esse tipo de
comportamento.
A partir dos questionários preenchidos pelos participantes, foi possível obter sugestões
de melhoria da interface. Um usuário sugeriu a possibilidade de configurar diferentes valores
de tempo de latência de acordo com o tipo de tarefa executada, por exemplo, a digitação
pelo teclado pode ser feita utilizando um valor menor de tempo de latência que o utilizado
para a seleção de botões do menu de navegação. O uso de outros tipo de teclados também
foi sugerido, assim como a possibilidade da interface ser multimodal, isto é, fazer uso em
conjunto com outros recursos como reconhecimento de voz e gestos.
Como pontos positivos, a ideia de controlar um navegador somente com o olhos foi
considerada muito interessante. O aspecto estético da interface foi elogiada, e um dos usuários
descreveu como natural a função de rolamento de páginas. De forma geral, a capacidade da
interface de permitir executar as funções básicas propostas foi outro ponto em destaque,
além de sua forma agradável e fácil de operar.
Capítulo 5

Conclusões

5.1 Interface desenvolvida

Os recursos disponibilizados pela API do navegador mostraram-se decisivos para a viabi-
lidade do desenvolvimento, em forma de extensão, da interface em oferecer as funcionalidades
básicas de envio, busca e visualização de conteúdos da web.
Todas as tarefas propostas foram realizadas pelos usuários, mas com graus variados de
dificuldade. Enquanto atividades como a paginação de conteúdos, recuo, avanço e recar-
regamento de páginas foram executados com facilidade, a seleção de objetos e entrada de
textos apresentaram maior grau de dificuldade. A representação de objetos por áreas de
ativação robustas as imprecisões do rastreador de olhar permitiram a seleção de objetos que
eram ambíguos nas suas formas originais. Cliques acidentais (problema do Toque de Midas)
impactaram no desempenho das tarefas de seleção de objetos, problema que pode ser ame-
nizado pelo aumento do tempo de latência ou pela disposição de descrições textuais fora de
seus respectivos objetos de seleção. Quanto a entrada de textos por um teclado puramente
ativado por tempo de latência, apesar de facilmente aprendida pelos usuários, sua velocidade
de digitação foi apontada como um fator limitante para a tarefa. Contudo, o desempenho foi
dentro do esperado para essa técnica, pois a entrada de texto nunca pode ser muito rápida
(Majaranta e Räihä (2007)).
Aspectos subjetivos como a estética e comodidade tiveram influência positiva na avaliação
geral do produto por parte dos usuários.

5.2 Uso de métodos de Design de Interação

Em relação a formalização de requisitos, a identificação das necessidades dos usuários
mostrou-se ser uma etapa necessária para a definição do escopo do projeto. Essa defini-
ção facilitou a transição para a fase de implementação das versões interativas ao se definir
claramente o que deve e o que não deve ser feito.
Observou-se que testes de usabilidade fornecem informações de grande valor para que o

31
32 CONCLUSÕES

designer possa avaliar o grau de proximidade entre o sistema pretendido a partir do modelo
conceitual e físico concebido, e o sistema implementado. Tarefas cujos passos aparentavam
serem intuitivos para o designer mostraram-se confusas de serem executadas pelos parti-
cipantes dos testes. Assim, as informações obtidas desse tipo de teste podem auxiliar na
formalização de novos requisitos, permitindo ao designer a remodelagem do sistema para
que assim, se aproxime cada vez mais daquilo que o usuário deseja utilizar.
33
34 APÊNDICE A

Apêndice A

Folha de instruções

Estudo de Usabilidade

O propósito deste estudo é obter uma melhor compreensão dos problemas que os usuários encontram na
interface Ocular Navigator Extension, que permite controlar um navegador com o olhar para acessar a
web. As tarefas que devem ser completadas e que permitirão um melhor entendimento dos problemas estão
listadas a seguir:

Tarefa #1: Explorar a interface

Explore a interface por 10 minutos.
Tarefa #2: Configuração da extensão
A. Acesse o botão de configuraões (Settings).
B. Configure um tamanho mínimo e um valor para dwell-time.
C. Teste a configuração.
D. Salve a configuração e saia do modo configurações.
Tarefa #3: Entrada de endereços de uma página
A. Acione o botão de entrada de endereços.
B. Entre num endereço qualquer por meio do teclado.
Tarefa #4: Uso dos recursos voltar, avançar e recarregar página
A. Volte para a página anterior.
B. Avance uma página.
C. Recarregue a página
Tarefa #5: Uso de bookmarks
A. Marque a página como favorito.
B. Busque a página marcada e selecione-a.
C. Delete a página recém marcada.
Tarefa #6: Rolamento e clique de link da página
Uma página com resultados do motor de busca da Google está previamente carregada.
A. Vá para o final da página.
B. Volte para o início.
C. Selecione o segundo resultado da página.
Tarefa #7: Entrada e submissão de texto
Uma página com caixa de texto e botão de submissão está previamente carregada.
A. Selecione a caixa de texto.
B. Digite um texto e saia do modo teclado.
C. Selecione o botão de submissão.
Referências Bibliográficas

Anliker(1976) J Anliker. Eye movements - On-line measurement, analysis, and control.

Eye movements and psychological processes, páginas 185–199. Citado na pág. 3

Annett e Duncan(1967) J. Annett e K. D. Duncan. Task analysis and training design.

Occupational Psychology, 41(July):211–221. Citado na pág. 13

Clemotte et al.(2014) A. Clemotte, M. Velasco, D. Torricelli, R. Raya e R. Ceres. Accuracy

and precision of the tobii X2-30 eye-tracking under non ideal conditions. Em NEURO-
TECHNIX 2014 - Proceedings of the 2nd International Congress on Neurotechnology,
Electronics and Informatics, páginas 111–116. ISBN 9789897580567. URL http://www.
scopus.com/inward/record.url?eid=2-s2.0-84909956641{&}partnerID=tZOtx3y1. Citado na
pág. 6

Diaz-Tula e Morimoto(2016) Antonio Diaz-Tula e Carlos H Morimoto. AugKey: In-

creasing Foveal Throughput in Eye Typing with Augmented Keys. Proceedings of the
2016 CHI Conference on Human Factors in Computing Systems, páginas 3533–3544. doi:
10.1145/2858036.2858517. URL http://doi.acm.org/10.1145/2858036.2858517. Citado na pág.
28

Duchowski(2007) Andrew Duchowski. Eye tracking methodology: Theory and practice.

ISBN 9781846286087. doi: 10.1007/978-1-84628-609-4. Citado na pág. 4

Goldberg e Wichansky(2003) Joseph H. Goldberg e Anna M. Wichansky. Eye Tracking

in Usability Evaluation. A Practitioner’s Guide. Em The Mind’s Eye: Cognitive and
Applied Aspects of Eye Movement Research, páginas 493–516. ISBN 9780080518923. doi:
10.1016/B978-044451020-4/50027-X. Citado na pág. 5

Hartridge e Thompson(1948) Hamilton Hartridge e L.C Thompson. Methods of in-

vestigating eye movements. British Journal of Ophthalmology, 32:581–591. Citado na pág.
3

Jacob(1990) Robert J. K. Jacob. What you look at is what you get: eye movement-
based interaction techniques. Proceedings of the SIGCHI conference on Human factors
in computing systems Empowering people - CHI ’90, páginas 11–18. ISSN 07366906. doi:
10.1145/97243.97246. URL http://portal.acm.org/citation.cfm?doid=97243.97246. Citado
na pág. 28

Jacobson et al.(1992) I Jacobson, M Christerson, P Jonsson e G Overga-

ard. Object-Oriented Software Engineering: A Use Case Driven Approach,
volume 2640. ISBN 0201544350. URL http://www.mendeley.com/research/
objectoriented-software-engineering-a-use-case-driven-approach/. Citado na pág. 16

35
36 REFERÊNCIAS BIBLIOGRÁFICAS

Javel(1878) É Javel. Essai sur la physiologie de la lecture. Annales d’Oculistique. Citado na

pág. 3

Just e Carpenter(1976) Marcel Adam Just e Patricia A. Carpenter. Eye fixations and
cognitive processes. Cognitive Psychology, 8(4):441–480. ISSN 00100285. doi: 10.1016/
0010-0285(76)90015-3. Citado na pág. 4

Karn(2000) Keith S. Karn. “saccade pickers” vs. “fixation pic-

kers”: The effect of eye tracking instrumentation on research. Em Proceedings
of the 2000 Symposium on Eye Tracking Research & Applications, ETRA ’00, páginas
87–88, New York, NY, USA. ACM. ISBN 1-58113-280-8. doi: 10.1145/355017.355030.
URL http://doi.acm.org/10.1145/355017.355030. Citado na pág. 4

Majaranta e Räihä(2007) Päivi Majaranta e Kari Jouko Räihä. Text Entry by Gaze:
Utilizing Eye Tracking. Em Text Entry Systems, páginas 175–187. ISBN 9780123735911.
doi: 10.1016/B978-012373591-1/50009-7. Citado na pág. 6, 16, 31

Penkar et al.(2012) Abdul Moiz Penkar, Christof Lutteroth e Gerald Weber. Designing
for the eye: Design parameters for dwell in gaze interaction. Em Proceedings of the 24th
Australian Computer-Human Interaction Conference, OzCHI ’12, páginas 479–488, New
York, NY, USA. ACM. ISBN 978-1-4503-1438-1. doi: 10.1145/2414536.2414609. URL
http://doi.acm.org/10.1145/2414536.2414609. Citado na pág. 28

Preece et al.(2002) Jenny Preece, Yvonne Rogers e Helen Sharp. Interaction De-
sign: Beyond Human-Computer Interaction. Design, 18(1):68–68. ISSN 00104485.
doi: 10.1016/S0010-4485(86)80021-5. URL http://linkinghub.elsevier.com/retrieve/pii/
S0010448586800215. Citado na pág. 11, 13, 14, 25

Taylor(2000) a. Taylor. IT projects : sink or swim. The computer Bulletin, 42(January):

24–26. ISSN 00104531. doi: 10.1093/combul/42.1.24. Citado na pág. 13