UNICAMP – Universidade Estadual de Campinas
Disciplina: Construção de Interfaces Homem-Computador – MC750/MO825
Professora: Cecília Baranauskas
Documentação da Tarefa 8 – parte A
Design da Interface e Interação do Protótipo
João Paulo Fernandes Ventura – ra024115
Ng Kin Jin – ra045565
Thiago Fernandes Crepaldi – ra046713
Introdução
1
Descrição da Problemática e dos Objetivos de Design ... 3
2
Descrição da Metodologia Adotada... 4
3
Etapas do Processo e Evolução do Design... 5
4
Avaliação Preliminar do Protótipo ... 9
5
Especificação do Design da Interface e da Interação ... 10
6
Considerações sobre aspectos de Implementação ... 11
7
Referências... 12
1 Descrição da Problemática e dos Objetivos de Design
A relevância adquirida pela internet como também um meio de comunicação de massa estimulou a tendência de inserir as funcionalidades dos serviços públicos ao ambiente multimídia oferecido por este meio. Com o objetivo facilitar o acesso, de disponibilizar de maneira ampla, acessível, aberta, gratuita, fácil, rápida informações acerca do governo e dos serviços por ele prestados, definiu-se uma nova classe de web services, os e-Gov’s, serviços institucionais da União oferecidos on-line.
Os e-Gov’s têm como premissa o dever de atender a todos os cidadão brasileiros, sejam alfabetizados, analfabetos completos, funcionais, portadores de algum tipo de deficiência, posicionados acima ou abaixo da linha da pobreza. Constituindo um sistema acessado por um público alvo de diversos perfis, os e-Gov’s necessitam de uma interface adequada a todos estes perfis, adequada na medida em que a navegação permita o uso pleno das funcionalidades requisitadas.
Os desafios enfrentados para a popularização dos e-Gov’s contém a dificuldade de habitualização à iniciativa de recorrer a meios não presenciais de consulta, de solicitação de serviços, obtenção de informações. Um recurso sugerido para amenizar este efeito é o desenvolvimento de e-Gov’s sob interfaces que ofereçam tão ou mais confiabilidade, eficiência, eficácia que os sistemas tradicionais.
A Previdência Social[1] dispõe de diversos serviços e benefícios de interesse de uma significativa parcela da popupação brasileira, tais como aposentadoria – por tempo de serviço, por invalidez, por dispensa, por idade – salário e licença maternidade, resgate de FGTS, licença por acidente de trabalho, etc. Motivado pela abrangência e impacto da atuação deste órgão, pela possibilidade de oferecer um serviço e qualidade através de
e-Gov’s e desafogar as agências e postos de atendimento presencial, o protótipo desenvolvido
na tarefa 6 propõe um redesign do site da Previdência Social focado no serviço de consulta do andamento de processos abertos por beneficiários, haja vista a redução do volume de
atendimentos presenciais provocada pela supressão desta etapa, acarretando em menor dispêndio do usuário e do governo.
2 Descrição da Metodologia Adotada
Na primeira tarefa fomos apresentados ao quarto desafio da Sociedade Brasileira de Computação, que consiste em prover "acesso participativo e universal do cidadão brasileiro ao cidadão brasileiro"[2].
Tendo o desafio como motivação, aplicamos Design Participativo para descobrir o público alvo. Como não estavamos em contato direto com a população, utilizamos Brain Writing entre os membros do grupo.
Primeiramente cada membro do grupo definiu textualmente em fichas os subgrupos que deveriam ser contemplados. Elas deveriam ser trocadas a cada dois minutos, de modo que acrescentassemos ou removessemos grupos nas fichas dos outros membros. Ao final dessa etapa percebemos o quanto eles eram heterogêneos, sendo as principais diferentes características detectadas foram:
Diferentes níveis de letramento Portadores de visão subnormal
Deficientes visuais
Deficientes auditivos, letrados ou não em nosso alfabeto
Analfabetos digitais Usuários sem deficiências
Utilizando a mesma metodologia de troca de cartões, definimos textualmente recursos desejados no sistema levando em consideração as tecnologias de acessibilidade disponíveis. Obtidas essas informações fundamentais, aplicamos o Brain Drawing. Cada membro desenhou quais seriam os elementos presentes em sua interface, trocando as folhas entre os outros membros a cada dois minutos. Percebemos que a cada intervenção dos outros dos outros integrantes do grupo, os modelos individuais convergiam para uma única interface
que satisfazia todos os membros. Terminada a troca de fichas, desenhamos em uma transparência o modelo final extraído da etapa anterior.
Essa tarefa também foi realizada por outros 7 grupos em sala e os resultados desenhos finais expostos a todos para críticas e sugestões. Essa última interação nos forceu novas idéias, como a utilização de vídeos em LIBRAS para ajudar usuários com deficiencias auditivas. Dado os últimos retoques no dessenho final, nós o adotados como pedra fundamental no desenvolvimento da ferramenta.
3 Etapas do Processo e Evolução do Design
A primeira implementação basicamente consistiu num reagrupamento mostrado na figura 1b da interface original mostrada na figura 1a . Almejavamos uma abordagem simplista, eliminado o excesso de texto e propaganda. As frases tornaram-se curtas e grupos de
Figura 1b. Site rediagramado.
ços correlatos foram argrupados, como mostram as áreas destacadas. Diferentemente da página original, todos os serviços estão bem visíveis e os mais importantes concentrados no centro da mesma. Vemos a inserção de um campo que nos diz em que ponto do sistema estamos como mostra a área destacada em verde na figura 1b. Vemos também destacado em vermelho novos recursos de acessibilidade, permitindo redefinição do tamanho das fontes e alterar o contraste com a página. Contudo esses recursos ainda não estavam habilidatos.
A segunda implementação possuia um caso de uso completo sendo ele descrito na especificação do protótipo. Um grande diferencial foi o acréscimo da funcionalidade de ajuda pessoas com deficiência auditiva. Um video demostrativo mostrado na figura 2 informaria o usuário com proceder em cada etapa da tarefa realizada. Na proposta original, cada função que o usuário desejasse realizar possuiria um ícone indicando a possibilidade de obter ajuda na forma de áudio, mostrado na figura 3. Existe uma barra de progresso, informando quão
longe do cumprimento da tarefa o usuário se encontra, e ícones para avançar e retornar de qualquer etapa da mesma.
Figura 2. Ajuda em LIBRAS
Na terceira versão foi inserido um mecanismo de seguraça para impedir que bots, programas que roubam dados de cadastros na internet, pudessem copiar dados. O usuário deveria digitar um conjunto de letras na forma de imagem aleatóriamente criadas a cada acesso.
Figura 4a. Teclado virtual comum.
Finalmente em sua quarta e última versão contamos com mais um caso de uso, também descrito na especificação do projeto, e a inserção de um teclado virtual, tanto no alfabeto comum como no alfabeto em LIBRAS. Figuras 4a e 4b.
4 Avaliação Preliminar do Protótipo
A avaliação preliminar do projeto foi efetuada pelos membros do grupo G1 sendo que ele se encontra em sua fase inicial de desenvolvimento. Porém percebemos uma radical alteração ao compararmos como site original da previdência. Houve uma redefinição do layout, agrupando serviços correlatos e incluindo novos recursos de acessibilidade. A versão avalidada apresentava dois casos de uso para testes:
Consultar situação de processo de concessão inicial de benefício da presidência;
Consultar situação de processos de revisão de benefícios;
A interface, através de um design para todos, provê soluções de interação para uma grande gama de usuários. Ela contempla usuários sem deficiências com diferentes níveis de letramento, portadores de visão subnormal, deficientes visuais e portadores e deficiências auditivas. Nos casos de uso atentido o usuário tem pleno controle de que ponto de ação realizada e pode retomá-la em caso de falha.
O sistema propõe uma navagação simples com textos curtos, informativos e com ícones que simbolizam a ação sendo que sua estrutura HTML é corretamente interpretada por navagadores para deficientes visuais. Além desses recursos, os usuários podem contar com auxílio através de áudio e, para os portadores de deficiência auditiva ão letrados em nosso alfabeto, podem contar com uma versão virtual de um teclado em LIBRAS. Este último grupo e usuáros não letrados foram os grupos privilegiados em nosso projeto.
Em sua primeira versão o protótipo ainda não era completamente integrado ao sistema original tornando-a inconsistente mas essa falha foi devidamente corrigida em sua versão final. Em nenhum momento o sistema foi projetado para permitir configuração de tarefas
repetitivas ou personalização do sítio. Por fim as funcionalidades de ajuda textual ainda não foram implantadas.
Um aspecto que realizariamos de maneira diferente numa futura versão seria criar ícones com mais detalhes e seguindo as convenções da internet de modo a fornecer ainda mais informações com o mínimo de texto.
Podemos concluir que o protótipo possui um conceito A por sua proposta simples e elegante, pois através de modificações não muito elaboradas ele oferece uma radical melhora na qualidade dos serviços para a comunidade.
5 Especificação do Design da Interface e da Interação
5.1 Consultar Processos de Concessão Inicial de Benefícios GOAL: consultar um processo de concessão inicial de beneífico o [SELECT: Serviços, Recursos de Acessibilidade, Ajuda, ...]
Serviços
o GOAL: selecionar processo de concessão inicial de benefícios
o [SELECT: Processo de concessão inicial de benefícios, Processo de Revisão de Benefícios, Decisões da Câmara e Juntas de Recursos da Previdência Social, Consulta a Benefícios por Incapacidade por Empresa, ...]
Processo de Concessão Inicial de Benefícios o GOAL: Informar o número do benefício
o [SELECT: usar campo de edição, continuar, voltar, Ajuda, ...] Usar campo de edição e informar número do benefício Continuar
o GOAL: Informar chave verificadora
o [SELECT: usar campo de edição, avançar, voltar, Ajuda, ...] Usar campo de edição e informar chave verificadora Continuar
o Avançar
o Ler resultado obtido da busca
5.2 Consultar Processos de Revisão de Benefícios GOAL: consultar um processo de revisão de benefício
o [SELECT: Serviços, Recursos de Acessibilidade, Ajuda, ...] Serviços
o GOAL: selecionar processo de revisão dos benefícios
o [SELECT: Processo de concessão inicial de benefícios, Processo de Revisão de Benefícios, Decisões da Câmara e Juntas de Recursos da Previdência Social, Consulta a Benefícios por Incapacidade por Empresa, ...]
Processo de Revisão dos Benefícios o GOAL: Informar o número do benefício
o [SELECT: usar campo de edição, continuar, voltar, Ajuda, ...] Continuar
o Ler mensagem de erro o [SELECT: Voltar, Ajuda, ...]
Voltar
6 Considerações sobre aspectos de Implementação
O sistema foi desenvolvido em HTML[4] utilizando como ferramenta de edição o software
Dreamwaver[5]. Como não possuiamos acesso ao banco de dados real da previdência,
preferimos não implementar recursos de acesso utilizando PHP concentrar em implementações e funcionalidades dinâmicas através de JavaScript[4, 6]. Através dela pudemos inserir o teclado virtual e o serviço de ajuda em LIBRAS. Os videos demonstrativos em LIBRAS foram obtidos a partir do YouTube[7].
7 Referências
[1]
http://www.previdenciasocial.gov.br/
. (Dezembro de 2007). Ministério da Previdência Social[2]
http://www.sbc.org.br
. (Dezembro de 2007). “2006 Sociedade Brasileira de Computação: Grandes Desafios da Computação no Brasil”[3] BARANAUSKAS, Maria Cecília. (Novembro de 2007) MC750 Interface Computador: Notas de Aula.
[4] GOODMAN, Danny. (Agosto de 2007) “JavaScript & DHTML”.
[5] MCFARLAND, David Sawyer. (Dezembro de 2005) “Dreamwaver 8: The Missing Manual”. [6] RESIG, John. (Dezembro de 2006) “Pro JavaScript Techniques”.
[7]
http://www.youtube.com
. (Dezembro de 2007)8 Anexos
8.1 Seqüência de transição telas correspondente ao caso de uso “Consultar Processos de Concessão Inicial de Benefícios”
8.2 Seqüência de transição de telas correspondente ao caso de uso “Consultar Processos de Revisão de Benefícios”
