UEM - UNIVERSIDADE ESTADUAL DE MARINGÁ

CENTRO DE TECNOLOGIA – DEPARTAMENTO

DE INFORMÁTICA
ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE
SISTEMAS PARA WEB

SERVIÇO WEB 2.0

AUTENTICAÇÃO VISUAL

Claudia Heidemann de Santana

Elton F. Xavier
José Edmilson da Fonseca
Joyce Milani Mathias
Regis da Silva Avansini
Renan Honorato

MARINGÁ
2010
 UEM - UNIVERSIDADE ESTADUAL DE MARINGÁ
CENTRO DE TECNOLOGIA – DEPARTAMENTO DE INFORMÁTICA
ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB

SERVIÇO WEB 2.0

AUTENTICAÇÃO VISUAL

Trabalho de pós-graduação apresentado à

disciplina de Design de Interação, ministrada
pelo professor Frederick VanAmstel.

MARINGÁ
2010

2
INTRODUÇÃO

Com o avanço da tecnologia nos últimos anos a utilização de computadores para a

realização de tarefas tem se tornado cada vez mais presente, além disso, devido a diversidade
tecnológica existente acabamos nos sobrecarregando com a enorme variedade de criação de
usuários, sendo assim temos a árdua tarefa de memorizar diferentes senhas para acessar as
mais variadas contas de usuário.

Nota-se a principio que uniformizar as diferentes contas de usuário de uma pessoa

para acesso a diferentes sistemas de autenticação pode aumentar a vulnerabilidade, pois a
quebra do sigilo de uma única conta de usuário acarretará na quebra de todas as contas deste
mesmo usuário. Surgindo assim uma demanda para suprir este problema sem que afeta seu
nível de confiança.

Tomando como modelo de técnicas adotadas por grandes empresas, não

necessariamente empresas de segurança de T.I., como por exemplo, a Bradesco S.A., no qual
recentemente tem adotado de forma gradativa o escaneamento do formato da palma da mão
para autenticação em seus caixas eletrônicos, observamos que o uso deste tipo de recurso
poderia suprir o problema de memorizar diferentes senhas e garantir que a vulnerabilidade
não seja afetada uma vez que aspectos biométricos são únicos a cada ser humano.

A Autenticação Visual permitirá aos usuários do Word Wide Web, a realizar

autenticação em diferentes sites de forma única e indivisível, não obrigando a memorizar a
grande variedade de usuários e senhas. O serviço de autenticação oferecido permitirá que
empresas que possuem sites ou sistemas on-line possam incorporá-lo em seus sistemas de
autenticação, sem que seja necessário realizar uma reestruturação, não sendo afetados e
permitindo a estes usuários que se vinculem ao novo sistema de autenticação a qualquer
momento.

3
Figura 1. Autenticação Visual através da Iris.

2. OBJETIVO DO PROJETO

O projeto de Autenticação Visual funcionará como um serviço para os mais variados

sistemas online, podendo ser incorporado de forma simples, pois a arquitetura do projeto
garante que ao decorrer de todos os processos de implantação não afete os atuais sistemas de
autenticação presentes, pois estes serão mantidos, A Autenticação Visual é uma alternativa
que tende a ser a principal forma do usuário a logar em diversos sites, uma vez que trará
maior comodidade ao usuário. Ao incorporar o serviço não será necessário alterar as regras
de negócio da empresa.

Os principais objetivos da Autenticação Visual, é propiciar conforto, segurança e

garantir a atomicidade de cada usuário.

Todo o projeto de criação deste serviço se consiste na utilização da biometria

(medida da vida), atualmente existem diferentes características pessoais que nos diferem uns
dos outros, para exemplificar temos a impressão digital,leitura da palma da mão,
reconhecimento facial, autenticação de voz, leitura de Iris e leitura de retina, este ultimo

4
adotado como padrão para a Autenticação Visual, não impedindo que seja incorporado novos
recursos que permitam ao usuário escolher o tipo de autenticação biométrica que ele deseja
utilizar.

Inicialmente a Autenticação Visual, será baseada em padrões, ou seja, o usuário

necessitará realizar ao menos três vezes a leitura de sua retina, para que seja estabelecidos
padrões de coloração e formato que o difere de outros usuários. O Serviço de Autenticação
Visual não fará essa análise, esta por sua vez será terceirizada por outros softwares, contudo
a geração de um arquivo XML, com estes dados e a comparação no ato da autenticação ficará
a cargo do serviço da Autenticação Visual, para isso será feito a comunicação entre o cliente
e servidor do sistema, toda essa comunicação estará incluso no serviço, a figura 2 ilustra o
processo do funcionamento do serviço de Autenticação Visual, dentro de um site.

Os pré-requisitos são uma WebCam com infra-vermelho e a instalação do software

que realizará o processamento da imagem da retina capturada pela webcam, o software será
gratuito e estará disponível para download como formato de plugin aos navegadores,
funcionando de forma analógica ao plugin do flash.

Figura 2. Funcionamento do Serviço de Autenticação Visual em sites.

5
3. ORDENAÇÃO DO PROJETO
A idéia a princípio foi de elaborar um serviço de autenticação que venha a
padronizar as diferentes contas de usuários na web, ainda com a idéia crua e documentada de
forma grosseira em cartolina identificamos parceiros na turma para darmos continuidade ao
projeto, inclusive parceiros com idéias semelhantes, com o apoio de toda a equipe utilizando
o Brainstorming identificamos uma forma inovadora e avançada de realizar a autenticação
através do uso da biometria mais especificamente através do uso da Autenticação Visual que
efetua a leitura da retina.

Antes de dar continuidade ao projeto foi necessário averiguar sua aceitação perante
os usuários e qual o nível de acesso destes usuários aos recursos necessários para utilização
da Autenticação Visual para isso elaboramos um questionário para criação do mesmo
utilizamos os métodos Personas e Análise de Contexto de Uso para elaborar questões coesas
e relevantes. Cada membro ficou responsável em aplicar o questionário em pelo menos cinco
pessoas diferentes, para que o resultado demonstre algo relevante para analisarmos a
aceitação e a disponibilidade dos usuários a utilizar nosso serviço de Autenticação Visual.

Após a aplicação do questionário foi criado uma apresentação para divulgar o

serviço a turma, onde caracterizamos os objetivos do projeto, seu funcionamento dentro de
uma aplicação web, suas vantagens com relação aos sistemas de autenticação utilizados e
principalmente os resultados obtidos no questionário, o que demonstrou um nível de
aceitação considerável. Definido o escopo do projeto e suas principais características foi dado
inicio ao processo de criação, a principio foi elaborado o mapa mental do projeto para
organizar as informações obtidas até então, para isso utilizamos recursos online encontrados
no http://www. Mindmeister.com/pt/home.

Após a elaboração do mapa mental, utilizamos a técnica de “Cart-Sorting”, a

principio aplicada entre os participantes do projeto e em seguida a possíveis usuários, para
elaboração e teste deste método utilizamos uma ferramenta online disponível em
http://websort.net/.

Aplicando os resultados do Card-Sorting através do site http://writemaps.com/

definimos a estrutura dos menus necessários para gerenciar a aplicação de nossos serviços na
web

6
 Como todos os recursos e atividades definidas elaboramos o esboço de identidade
visual através de ferramentas de design como o photoshop, e com auxilio de recursos para
definição de coloração obtidos no site http://colorschemedesgner.com/.

Com o esboço em mãos e com os padrões de coloração definidos foi dado inicio a
criação dos Wireframes, utilizando recursos obtidos em http://gp,pckingbirf.com/, podendo
assim visualizar as estruturas das paginas e posicionamento de seus respectivos conteúdos,
lembrando que para essas tarefas foi pensado sempre com relação ao serviço oferecido e não
com relação a definição de sites que o utiliza.

4. APLICAÇÃO DA ENTREVISTA

A realização de entrevistas com os usuários em potencial permitiu levantar

informações relevantes, porém adotamos a idéia durante a entrevista de aplicarmos um
questionário que nos permita averiguar a relevância da nossa proposta, este questionário foi
elaborado com o auxilio de métodos apresentado a nós, pelo site
http://www.faberludens.com.br/pt-br/node/26, no qual nos baseamos a descrição e definição
destes métodos que nos utilizamos foi os métodos; Personas e Análise de Contexto de Uso,
para melhor elaborar o questionário. O questionário aplicado nos permitiu principalmente
averiguar a aceitação do projeto, e se os usuários em questão teriam como obter os requisitos
mínimos para seu funcionamento, o questionário esta em anexo ao trabalho (Anexo 1). A
Figura 2.A, 2.B e 2.C ilustra de forma agrupada o resultado obtido de algumas questões.

7
Figura 3 – Gráficos / Resultados das entrevistas

Nota-se que a grande maioria das pessoas, cerca de 75% possuem de dois a quatro
logins diferentes, se analisarmos que um usuário possua quatro contas onde o nome de
usuário e senha de todas essas contas se diferem, logo identificamos que poderá haver 24
combinações diferentes ou 4! para seus logins e senhas, notamos ainda que 80% possuem
dificuldade em lembrar suas contas de login, e o fator que mais destacamos é a
disponibilidade dos usuários de obterem ou já possuir um dispositivo de webcam, o que é
fundamental para a Autenticação Visual, desta forma conseguimos viabilizar o início do
projeto.

8
5. MAPEAMENTO MENTAL
O método WriteMaps é uma ferramenta que auxilia no desenvolvimento do percurso
(ou do processo) de navegação dentro do sites. Essa ferramenta nos permitiu realizar o
mapeamento de uma navegação prática e ágil ao o usuário do serviço de Autenticação Visual.
Esse método de mapeamento do site foi utilizada através do site http://writemaps.com/.

Figura 4 - Mapeamento Mental

6. CARD SORTING
O método Card Sort utilizado através do site http:\\www.websort.net permitiu
analisar a estrutura do serviço de Autenticação Visual para sites na web. Através desse
recurso foi proposto um projeto inicial realizado pelos desenvolvedores do serviço de
Autenticação Visual onde foram classificados os itens e suas respectivas categorias
disponíveis no sistema de Autenticação Visual. Esses itens deveriam ser classificados
posteriormente pelo usuário para podermos coletar os resultados, analisar e compará-los com
os dados classificados no projeto inicial. Com isso podemos analisar e verificar que os dados
informados pelos usuários foram classificados de forma diferente da proposta no projeto
inicial e através desses resultados foi percebido que uma possível reorganização dos itens
poderia ser realizada melhorando a estrutura e organização do serviço de Autenticação Visual
para sites na web.

9
 Figura 5 - Resultado do CardSorting – Itens Agrupados pelos usuários

7. MAPEAMENTO DO SITE

Figura 6 - Resultado final do mapa do site – produzido no WriteMaps

10
8. WIREFRAMES

Aliado ao sitemap, o wireframes é um documento que se torna cada vez mais

importante para o trabalho de desenvolvedores de web sites. Sua função é estruturar o
conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e sua
relação com os demais elementos formadores do todo. Também cabe ao wireframes indicar a
correta marcação de textos, breadcrumbs de navegação, guidelines de marca e até dos
recursos de programação e tecnologia a serem utilizados pela equipe de produção.
Posteriormente também serve como baliza para testes de usabilidade.

De acordo com todos os processos anteriores, foi feita a elaboração dos wireframes,
disponibilizando os layouts das páginas para validação com os usuários. Após sucessivas
validações com os usuários e discussões internas entre os integrantes do projeto, os layouts
foram definidos conforme as imagens dispostas a seguir.

Figura 7 - Telas do wireframes produzidas no Mockingbird (www.mockingbird.com)

11
 Figura 8 - Tela login usuário;

Figura 9 - Tela de autenticação.

12
 Figura 10 - Tela de cadastro

9. ESTUDOS DO LAYOUT – CORES E TIPOGRAFIA

Na hora construir um site a primeira coisa que temos que ter claro é a gama de cores
que vamos empregar em suas diferentes partes, e para isso devemos começar sempre com
selecionar uma cor ou cores base, que será o que dará um espírito próprio ao site. Para isto é
importante a escolha desta gama, que, por regra geral, será conveniente manter em todas as
páginas do site, conseguindo com isso estabelecer uma identidade própria e uma continuidade
entre todas as páginas que a formam.

Se tivermos escolhido ou imposto um logotipo, suas cores serão as que marquem

como guia o resto da página, trabalhando nas diferentes partes da página com os degrades
claros e escuros destas cores base. Por ser necessária a introdução de outras cores (uma ou
duas), teremos que escolher estas de forma que sejam equilibradas com as do logotipo e
trabalhem juntas em boa harmonia.

13
 Quanto a tipografia, verificamos que todos os grandes blocos de texto devem
definidos em um tipo sem serifa, tornando-se muito mais fácil de ler. Títulos e outros
pequenos blocos de texto podem ser numa fonte serifada, criando um equilíbrio entre os dois.

Para isto fizemos um estudo das cores e da tipografia a ser utilizada no serviço de
autenticação visual, no qual utilizamos o site www.kuler.adobe.com, para fazer o estudo das
cores. Que nos deu o seguinte resultado como estudo de cores.

Figura 11 - Estudo das cores e logomarca desenvolvida em corel draw.

14
 Figura 12 - Resultado do layout do trabalho

CONCLUSÃO
Durante todos os processos que envolveu este projeto, notou-se que a cada etapa em
que este era submetido, obteve-se uma considerável melhoria em qualidade, usabilidade e
design. Percebemos que temos ao nosso alcance diversas ferramentas que permitem o
trabalho online em grupo mesmo que a distancia, e também facilitam o trabalho de
desenvolvimento de um web site.
Partindo do principio de propiciar comodidade ao usuário chegou a utilização de
recursos que garante tal objetivo, propiciando um aumento considerável com relação a
segurança durante um processo de autenticação. Concluindo, observa-se a necessidade de
planejar e organizar as informações relacionadas ao projeto antes de dar inicio a fase de
implementação.

15
 Contatos da Equipe:

Claudia: chsantana@gmail.com
Edmilson: edmilsonfej@hotmail.com
Elton: elton_fx@hotmail.com
Joyce: milanimaringa22@hotmail.com
Regis: regisvansini@hotmail.com
Renan: renan102@hotmail.com

16
Anexo

17
Questionário aplicado em entrevista com usuário.

1) Qual o seu nome? _____________________________________

2) Qual a sua idade?

[ ] 10 a 20 anos
[ ] 21 a 30 anos
[ ] 31 – 40 anos
[ ] 41 – 50 anos
[ ] + de 51 anos

3)Qual seu grau de escolaridade?

[ ] 1 a 4 serie
[ ] 5 a 8 série
[ ] Segundo grau incompleto
[ ] Segundo grau completo
[ ] Superior incompleto
[ ] Superior completo
[ ] Outros

4)Onde você usa internet?

[ ] Casa
[ ] Trabalho
[ ] Escola/faculdade
[ ] Lan house
[ ] Casa de amigo
[ ] Outro local

5)Para que você mais usa a internet?

[ ] Jogos
[ ] Pesquisas
[ ] Sites de relacionamento
[ ] Acesso a bancos
[ ] Entretenimento

6)Com qual freqüência você utiliza a internet?

[ ] Todos os dias
[ ] Toda semana
[ ] Uma vez a cada 15 dias
[ ] Raramente

7)Quantos logins diferentes você possui?

[ ] Nenhum
[ ] Apenas 1
[ ] De 2 a 4
[ ] Mais que 4

18
8)Você acha a internet segura?
[ ] Sim
[ ] Não

9)Você costuma alterar suas senhas para prevenir invasões?

[ ] Nunca
[ ] As vezes
[ ] Quase Sempre
[ ] Sempre

10)Com qual freqüência você esquece seu login e ou senha?

[ ] Nunca
[ ] As vezes
[ ] Quase Sempre
[ ] Sempre

11)Nos sites que você utiliza atualmente você realizaria o seu login pelo
reconhecimento da Iris? (através da tecnologia biometria)
[ ] Sim
[ ] Não

12)Classifique suas condições de acesso a dispositivos como Webcam,

Microfones e scanners?
[ ] Inacessível (não tenho)
[ ] Pouco acessível (algumas vezes)
[ ] Acessível (tenho mas não funciona ou não sei usar)
[ ] Muito acessível (tenho e uso sempre)

19