UNIVERSIDADE FEDERAL DE SERGIPE – UFS DEPARTAMENTO DE COMPUTAÇÃO – DCOMP

RELATÓRIO TÉCNICO DE AVALIAÇÃO DE USABILIDADE PROFESSOR: HENRIQUE NOU SCHNEIDER. MARCOS FELIPE DOS SANTOS; RAFAEL REIS DE ASSIS.

SÃO CRISTÓVÃO - SE

26 DE SETEMBRO DE 2016

OBJETO DA AVALIAÇÃO: INTERNET BANKING DO BANCO DO BRASIL DISPONÍVEL EM: HTTPS://WWW.BB.COM.BR

1Fundamentação Teórica .............................................................................................................. 3 1.1Introdução ................................................................................................................................. 3 1.2Heurísticas de Usabilidade de Nielsen .................................................................................... 3 1.3Barema de Avaliação ................................................................................................................ 5

1.3.1Quanto ao Problema Detectado ........................................................................................ 5 1.3.2Quanto à Natureza do Problema ...................................................................................... 5 1.3.3Quanto ao Grau da Avaliação ........................................................................................... 5

2Avaliação ....................................................................................................................................... 6 2.1Visibilidade do estado do sistema. ....................................................................................... 6 2.2Mapeamento entre o sistema e o mundo real. .................................................................... 7 2.3Liberdade e controle ao usuário. ......................................................................................... 9 2.4Consistência e padrões. ...................................................................................................... 10 2.5Prevenção de erros. ............................................................................................................. 12 2.6Reconhecer em vez de relembrar. ..................................................................................... 12 2.7Flexibilidade e eficiência de uso. ....................................................................................... 13 2.8Design estético e minimalista. ............................................................................................ 14 2.9Suporte para o usuário reconhecer, diagnosticar e recuperar erros. ............................. 14 2.10Ajuda e documentação. .................................................................................................... 16

3Considerações Finais ................................................................................................................. 17 4Referências Bibliográficas ........................................................................................................ 18

1 Fundamentação Teórica 1.1 Introdução Esta seção fala de modo geral a importância do Internet Banking, da Interface Humano-computador – IHC e a finalidade do documento. As instituições bancárias brasileiras vêm investindo cada vez mais em tecnologia para aumentar seus produtos e consequentemente mais serviços aos seus clientes. O Internet Banking, isto é, a utilização da internet para oferta de serviços bancários, tem como objetivo propor maior comodidade, facilidades, acessibilidade e segurança para seus clientes e prover economia, precisão e automação aos bancos. O Internet Banking era considerado apenas mais um canal para distribuição de serviços bancários “passou a estar no centro das discussões sobre a evolução e o futuro dos bancos” (DINIZ, 2004, p. 8). Segundo a pesquisa em 2005 feita pela Federação Brasileira de Bancos – FEBRABAN, no período entre 1994 a 2004, as transações bancárias feitas através da Internet tiveram um notável crescimento de 100% ao ano, em média. Um levantamento feito em 2011 apontou que as transações feitas pelo Internet Banking representam 24% das operações do setor. A ergonomia de IHC é necessária para qualquer sistema ou dispositivo que necessite de interação com o usuário, ela avalia diversos processos mentais(percepção, a atenção, o controle motor, a cognição e a memória) e desenvolve interfaces de acordo com a capacidade cognitiva dos usuários visando a melhor forma possível de adaptação de um usuário a um sistema/dispositivo específico. Uma melhor adaptação tem por consequência uma melhor utilização do sistema, gerando facilidade de aprendizado, memorização, eficácia, eficiência, redução de incidência de erros e satisfação na utilização por parte do usuário. Sabendo da grande importância da ergonomia de Interface Humano-computador e das operações bancárias feitas fora das instalações físicas por meio da Internet, este trabalho tem por finalidade avaliar o serviço proposto pelo Banco do Brasil seguindo as técnicas e heurísticas propostas por Jakob Nielsen. 1.2 Heurísticas de Usabilidade de Nielsen Esta seção descreve as heurísticas propostas por Nielsen e que serão utilizadas para

avaliar o objeto da avaliação. A avaliação de interface trata-se da mensuração do quanto um sistema informatizado é fácil de usar e para isso foram utilizadas as heurísticas apresentadas por Jakob Nielsen, já consolidadas em avaliações de interfaces, nas quais se encontram subdivididas em 10, que são: 1 – Visibilidade do estado do sistema: O sistema deve sempre manter o usuário informado sobre o que está ocorrendo, através de feedback apropriado, dentro de um tempo razoável. 2 – Mapeamento entre o sistema e o mundo real: O sistema deve “falar” a linguagem do usuário, com palavras, expressões e conceitos familiares ao usuário, no lugar de termos orientados para o sistema ou técnicos. Convenções do mundo real devem ser seguidas, fazendo a informação aparecer numa ordem lógica e natural. 3 – Liberdade e controle ao usuário: Os usuários frequentemente escolhem funções por engano e precisarão de uma “saída de emergência” claramente marcada para deixar o estado indesejado sem ter que passar por diálogos adicionais. 4 – Consistência e padrões: O sistema tem que falar a mesma linguagem o tempo todo, tratar coisas similares da mesma maneira, facilitando a identificação do usuário. 5 – Prevenção de erros: Tentar evitar que o erro aconteça, informando o usuário sobre as consequências das suas ações ou se possível, impedindo ações que levariam a uma situação de erro. 6 – Reconhecer em vez de relembrar: É bom o processo ser simples para que os usuários possam reconhecer seu fluxo e não precisar gravar as informações. 7 – Flexibilidade e eficiência de uso: O sistema precisa ser fácil para usuários leigos e flexível o bastante para se torna ágil aos usuários avançados. 8 – Design estético e minimalista: O sistema deve evitar que os textos e o design passem informações extras e irrelevantes ao usuário. Os diálogos do sistema precisam ser simples, diretos e naturais presentes nos momentos que realmente são necessários.

9 – Suporte para o usuário reconhecer, diagnosticar e recuperar erros: Ajudar o usuário a reconhecer, diagnostica e sanar erros. 10 – Ajuda e documentação: Devem ser fáceis de buscar, focada no domínio e na tarefa do usuário, e devem lista passos concretos a serem efetuados para atingir seus objetivos. 1.3 Barema de Avaliação Esta seção busca descrever as formas de classificação dos problemas detectados durante o processo de avaliação do objeto. Será levado em consideração a classificação propriamente dita do problema detectado, a natureza e o grau de severidade do mesmo. 1.3.1 Quanto ao Problema Detectado Maciel et al. (2004) apud Santos (2009) classifica os problemas de usabilidade em Principal ou Secundário. A classificação como principal indica que um problema é considerado frequente ou importante; e Secundário indica um problema temporário ou desprezível. 1.3.2 Quanto à Natureza do Problema A natureza do problema, para Maciel et al. (2004) apud Santos (2009), é classificada como Barreira, Obstáculo ou Ruído, conforme segue abaixo: Barreira: refere-se a um aspecto da interface no qual o usuário esbarra sucessivas vezes e não aprende a suplantá-lo. Uma barreira voltará a se apresentar ao usuário na próxima realização da tarefa. Obstáculo: refere-se a um aspecto da interface no qual o usuário esbarra e aprende a suplantá-lo. Ruído: refere-se a um aspecto da interface que causa uma diminuição de seu desempenho na tarefa. O usuário pode desenvolver uma má impressão do sistema. 1.3.3 Quanto ao Grau da Avaliação Santos (2009) com base nos estudos de Nielsen (1994 apud Maciel et al. 2004) apresenta uma escala de 0 a 4 que é utilizada para classificar os problemas de usabilidade encontrados durante a inspeção da interface, abaixo é descrita o que cada nível significa: Nível 0 – Sem Importância: não afeta a operação da interface para todos os usuários, não

sendo encarado necessariamente como um problema de usabilidade. Nível 1 – Cosmético: não necessita ser reparado, a menos que haja tempo disponível. Nível 2 – Simples: pode ser reparado, com baixa prioridade de correção. Nível 3 – Grave: deve ser reparado, com alta prioridade de correção. Nível 4 – Catastrófico: deve ser reparado de qualquer forma antes do produto ser disponibilizado. 2 Avaliação Esta seção mostra a avaliação heurística do Internet Banking do Banco do Brasil seguindo os princípios e técnicas propostas por Nielsen. A avaliação seguirá a ordem de heurísticas indicada no tópico 1.2. 2.1 Visibilidade do estado do sistema. O objeto da avaliação não fere esta heurística, a todo momento é indicado no topo da tela onde o usuário se encontra no sistema e cada operação que o mesmo realiza tem sempre um feedback, como mostrado nas figuras 1 e 2.

Figura 1: Detalhe da heurística 1, mostra em qual página ou operação o usuário está

realizando

2.2 Mapeamento entre o sistema e o mundo real. A todo momento o sistema fala a linguagem do usuário, são raros os lugares onde linguagens técnicas são utilizadas, porém, há sempre um botão de ajuda no canto superior da tela onde o usuário pode obter explicações sobre o que se encontra na tela. As figuras 3 e 4 mostram a linguagem do sistema.

Figura 2: Detalhe da heurística 1, mostra em qual página ou operação o usuário está realizando

Figura 4: Detalhe da heurística 2, mostra a linguagem simples do sistema

Figura 3: Detalhe da heurística 2, mostra a linguagem simples do sistema

2.3 Liberdade e controle ao usuário. Esta heurística não é ferida pois caso o cliente escolha uma operação por engano, terá sempre um botão para voltar a tela anterior, isto facilita o uso do sistema e evita que o usuário tenha de voltar ao menu principal para novamente acessar a tela ou operação desejada como mostram as figuras 5 e 6.

Figura 5: Detalhe da heurística 3, opção de retorno para tela anterior

2.4 Consistência e padrões. O layout é muito bem padronizado e consistente. No canto superior esquerdo sempre fica o logo do banco e a barra de pesquisa, já no canto superior direito, operações de interação com o usuário. Na lateral esquerda se localiza as informações do cliente e o menu onde o mesmo pode selecionar a operação que deseja como mostra as figuras 7 e 8.

Figura 6: Detalhe da heurística 3, opção de retorno para tela anterior

Figura 8: Detalhe da heurística 4, layout do sistema

Figura 7: Detalhe da heurística 4, layout padronizado para todas as telas

2.5 Prevenção de erros. O sistema em questão evita que o usuário entre com dados inválidos. Os campos de entrada não permitem que o cliente digite qualquer outra coisa senão o desejado. Na figura 9, por exemplo, o campo valor aceita apenas números, o usuário não consegue digitar letras do alfabeto ou caracteres especiais.

2.6 Reconhecer em vez de relembrar. Toda operação que o cliente deseja se localiza no menu lateral esquerdo, estas, divididas em categorias e subcategorias, assim o mesmo não precisa adivinhar ou relembrar onde as operações estão localizadas. A figura 10 mostra que se o usuário quer o extrato da conta-corrente, basta ir no menu lateral, selecionar conta-corrente e depois “extrato”.

Figura 9: Detalhe da heurística 5, campo valor só aceita números

2.7 Flexibilidade e eficiência de uso. O sistema fere a heurística 7, onde usuários iniciantes ou avançados possuem a mesma interface, ou seja, o objeto de avaliação não permite que um usuário leigo tenha uma interface mais “amigável” ou mais fácil de ser compreendida. Além disso, não há teclas de atalhos que possibilitem a um usuário avançado uma maior agilidade na realização de operações. Na tabela 1 é mostrada a avaliação da heurística em questão.

Tabela 1 – Flexibilidade e eficiência de uso Problema detectado: (X) Principal ( ) Secundário Natureza do problema: ( ) Barreira (X) Obstáculo ( ) Ruído Grau de avaliação: ( ) 0 Sem import. ( ) 1 Cosmético (X) 2 Simples ( ) 3 Grave ( ) 4 Catastrófico Solução: O sistema poderia dar o recurso de “personalizar” a interface a depender da experiência do usuário.

Figura 10: Detalhe da heurística 6, operação extrato da conta-corrente

2.8 Design estético e minimalista. A todo momento o sistema apresenta somente informações que realmente são necessárias naquela tela, evitando assim distrações nos usuários. A figura 11 abaixo mostra que isso ocorre.

2.9 Suporte para o usuário reconhecer, diagnosticar e recuperar erros. Caso o usuário realize alguma operação inválida ou entre com dados inválidos é retornada uma mensagem de erro indicando o que está errado e qual o motivo do erro, como mostram as figuras 12 e 13.

Figura 11: Detalhe da heurística 8, sistema apresenta somente informações necessárias

Figura 12: Detalhe da heurística 9, mensagem retornada após um login inválido

Figura 13: Detalhe da heurística 9, mensagem retornada após a tentativa de transferir um valor

maior que o saldo disponível

2.10 Ajuda e documentação. Todas as telas possuem um ícone de interrogação, onde caso o cliente tenha dúvidas do que fazer, ali é detalhado cada campo e operação que se pode realizar estando naquela tela. As figuras 14 e 15 mostram exemplos dessa ocorrência.

Figura 14: Detalhe da heurística 10, pop-up de ajuda quando clicado no botão de interrogação

no canto superior direito da tela

3 Considerações Finais Ao se projetar e implementar interfaces de usuário, mais especificamente nas aplicações Web, os envolvidos no processo de desenvolvimento têm o objetivo comum de possibilitar àqueles que de fato utilizarão estas aplicações a maior facilidade possível para a execução das suas atividades apesar de saber que é praticamente impossível atingir esta meta em todas as telas. Sabendo disso, é necessário diminuir a presença de falhas de usabilidade e o seu impacto na interação com os usuários. Neste contexto e com os resultados obtidos na análise de usabilidade das interfaces objeto deste trabalho, pode-se concluir que as interfaces do Internet Banking analisado, apesar de apresentar falha na usabilidade, mais especificamente na heurística Flexibilidade e eficiência de uso, permitem que os seus utilizadores concluam as atividades, as quais se propuseram a realizar, de forma satisfatória. Para se chegar ao resultado da avaliação foi necessário efetuar o estudo das heurísticas e técnicas propostas por Jakob Nielsen e assim foi possível analisar cada interface do objeto de avaliação pondo em prática os conhecimentos obtidos, este identificado com um dos principais pontos positivos da realização desse trabalho. Outro ponto que deve ser comentado é a possibilidade de verificar na prática as dificuldades enfrentadas pelos utilizadores desse serviço

Figura 15: Detalhe da heurística 10, pop-up de ajuda

prestado pelos bancos em seu dia a dia. Quando se fala de ergonomia na usabilidade em aplicações Web, é importante ter em mente que a concorrência está à distância de um clique. Trazendo para o contexto de Internet Banking uma boa usabilidade mantêm seus clientes na empresa, pois se a interface do concorrente é mais fácil e eficaz a chance de clientes migrarem para a concorrência é enorme. A usabilidade traz benefícios tanto para o utilizador quanto para quem disponibiliza o serviço, enquanto este utiliza-se do benefício de uma redução do tempo e custos de desenvolvimento, fidelização com o cliente como citado anteriormente, redução de erros do utilizador, recomendação do serviço a outros potenciais clientes, entre outros, àquele ganha como benefício satisfação, o desfrute de uma boa experiência com o sistema e mais confiança na organização. Este trabalho pode ser estendido, uma vez que foram utilizadas apenas 10 heurísticas e estas foram aplicadas ao serviço de Internet Banking do Banco do Brasil. Sabe-se da existência de outras heurísticas que são bem consolidadas na avaliação de interfaces, além disso outras instituições oferecem o mesmo serviço em questão, logo o trabalho pode ser ampliado avaliando estas outras instituições e fazendo o uso de outras heurísticas a fim de obter uma avaliação de interface mais completa. 4 Referências Bibliográficas ANDRADE, J. F. S.; SCHNEIDER, H. N.; SANTOS, G. A. Sites ergonômicos: Usabilidade e Acessibilidade de interfaces computacionais. Relatório técnico CNPq/PIBIC/UFS/2011. Universidade Federal de Sergipe. São Cristóvão, 2011. CYBIS, W. A. Engenharia de usabilidade: uma abordagem ergonômica. 2003. Disponível em:<http://www.labiutil.inf.ufsc.br/hiperdocumento/conteudo.html>. Acesso em: 03 de maio de 2016. GIL, G., USABILIDADE NA WEB. Disponível em: <http://www.gilguilherme.com/blog/usabilidade-na-web-porque-deve-ser-obrigatorio#.Vyjct7orK5d> Acesso em 03 de maio de 2016. NIELSEN, J., LORANGER, Hoa. Usabilidade na web: projetando websites com qualidade.

Rio de Janeiro, RJ: Elsevier, 2007 xxiv, 406 p. NIELSEN, J., Characteristics of usability problems found by heuristic evaluation. Disponível em: <http://www.useit.com/papers/heuristic/usability_problems.html>.