Recomendações de usabilidade e prototipagem de nova interface baseada na construção de wireframes

Pós-Graduação | Ergonomia, Usabilidade e IHC, Ergodesign e avaliação de interfaces | PUC – RIO

Análise do site www.itau.com.br Otávio Souza

Recomendações de usabilidade e prototipagem de nova interface baseada na construção de wireframes.

Pós-Graduação | Ergonomia, Usabilidade e IHC, Ergodesign e avaliação de interfaces | PUC – RIO | 2007

Recomendações de usabilidade e prototipagem de nova interface baseada na construção de wireframes





Tema

A utilização de serviços bancários

através da Internet.

Recomendações de usabilidade

e prototipagem de nova

interface baseada na construção

de wireframes

INTRODUÇÃO


| PUC – RIO




Problema

Falta de estruturação e má organização da informação apresentando:

- Menu Confuso com muitos itens;

- Página Inicial Com muita informação desnecessária;

- Objetos Jogados sem planejamento

- Site Poluído visualmente.

INTRODUÇÃO





Hipótese

As funções do site são pouco aparentes, dificultando a ação do usuário, a falta de planejamento da estrutura do itaú

internet banking cria dificuldades para finalização de tarefas.

INTRODUÇÃO




Justificativa

Cada vez mais as pessoas estão procurando conforto, comodidade, rapidez em um dos segmentos que mais crescem

neste sentido, que são os serviços de Bankline.

Para que estes serviços atendam os requisitos propostos de conveniência, disponibilidade, praticidade, baixo custo e

alta padronização, a interface deve conter informações apresentadas de uma maneira melhor estruturada sendo

essencial para uma navegação simples e eficaz, permitindo que o usuário conclua seus objetivos de maneira eficiente.

INTRODUÇÃO




Objetivo

Melhorar a interface do Internet Banking do Itaú. Facilitando a Conclusão de tarefas pelos usuários.

INTRODUÇÃO




MÉTODOS E TÉCNICAS




Técnicas aplicadas

Avaliação de perito

Foi feita uma avaliação de perito, baseado numa lista de recomendações e guidelines para o desenvolvimento de

interfaces, onde estas recomendações foram desenvolvidas com base na lista dos 10 princípios heurísticos, sendo a partir daí gerada uma

tabela G.U.T.


Questionário

O questionário aplicado tinha como objetivo coletar dados dos usuário desse sistema, buscando um perfil que se encaixasse numa futura

análise do site. Foram distribuídos 60 questionários e até o fechamento 46 respondidos.

Análise da Interface

Foram selecionados 10 participantes através do questionário, para que inspecionassem o site e relacionassem os problemas encontrados,

pontuando-os através da Tabela G.U.T.

Card Sorting

A técnica a seguir foi aplicada entra 10 usuários, escolhida para descobrir como as pessoas agrupam informações de forma que sejam

úteis para elas, possibilitando que sejam criadas estruturas de organização otimizadas e mais adequadas ao modelo mental dos usuário.

Wireframe

Foi construído um Wireframe da Home e da área interna de Conta Corrente, baseada nos resultados obtidos nas técnicas relacionadas.

Focus Group

Feita com 4 usuários para validação do Wireframe.




Análise de Perito

1ª fase -:

Pessoalmente, baseado em alguns princípios heurísticos, baseado numa lista de recomendações e guidelines para o

desenvolvimento de interfaces, foi gerada uma tabela G.U.T.


2ª fase – Aplicação :

Foi relacionado com base nos princípios estudados os problemas encontrados na interface do itaú, a seguir apontados.




Análise de Perito


Príncípio Utilizado:

- Equivalência entre o sitema e o mundo real

Ser consistente com as associações que os usuários

farão entre as cores e seus trabalho e em suas

culturas

Usar cor com propósitos e significados consistentes

no sistema.

Área analisada (Justificativa):

Home

- Áreas sem distinção de cor “Meu Bankline” e “Sua

segurança”. Tratando-se ainda de serem totalmente

distintas.

- Botão de “sair” no menu não oferece associação

para o usuário executar tal tarefa.




Análise de Perito



- Consistência e Padrões

Usar cores que sejam padrão para indicar links.

Adequar-se a linguagem visual da web.

Estabelecer e seguir regras simples de codificação por

cores


Internas

- Texto sem formatação indicando que é um link

- Retrancas Utilizadas confundem-se com a função

exercida pelo seus sub-itens.




Análise de Perito



- Prevenção de Erro

Minimizar Erros de percepção através

de apresentação eficiente das

informações.


Home

- Botão de “Home” localizado no menu

alinhado a direita, com pouco destaque

e sem percepção da informação.

- “ACESSAR OUTRAS CONTAS” no

menu não segue linguagem utilizada no

site para links, não sendo apresentado

como tal, estando como uma informação

perdida.




Análise de Perito



- Flexibilidade e eficiência de

uso

Prover clara distinção visual entre

as áreas que tenham funções

diferentes.

Destinguir entre cabeçalhos e

campos


Home / Internas

- Áreas sem distinção visual, com

conteúdos totalmente diferentes.




Análise de Perito



- Estética e Design minimalista

Informações raramente necessárias

devem ser acessadas por meio de links.

Prover um nível progressivo de detalhe

entre as páginas.


Home

- Área de com informações do usuário

logado com muito destaque, deixando

informações como extrato e de segurança

como informaçõe secundárias.

Internas

- Página com detalhamento sem

distinções, muita informação e pouca

explicação.




Análise de Perito

2 ª fase - Apresentação – Análise do site www.itau.com.br Otávio Souza

Tabela G.U.T

Com base na avaliação descrita

alguns problemas foram apontados

para serem avaliados e em cima

disto geradas recomendações

Ergonômicas e de usabilidade para

conclusão das tarefas.




Questionário

Foi Distribuído um questionário para seleção de participantes para fazer uma futura avaliação da interface também

apontando problemas de acordo com o tabela G.U.T. complementando os problemas apontados na avaliação de perito.

foram distribuídos ao todo 60 (sessenta) questionários e até a conclusão da etapa somente 46 respondidos.

O questionário buscava selecionar participantes com perfil para uma futura análise do site.

Critérios utilizados:

- Ser usuário do Internet Banking do Itaú

- Utilizar diariamente a Internet

- Utilizar a maioria dos itens do questionário de serviços do site

- O grau de facilidade que utiliza os serviços ( coletados os dados de regular em diante)

- E como a interface se apresenta na opinião dos usuários ( coletados os dados de confusa em diante)


Anexo 1




Questionário


Tabulação dos resultados obtidos através dos questionários:

Faixa Etária Formação

Frequência de utilização da Internet Tempo ConectadoTempo Conectado




Questionário


Locais de Acesso Recursos mais utilizados

Internet Banking que possui Tempo ConectadoComo teve conhecimento do Internet Banking





Questionário


Serviços Utilizados Grau de Facilidade

Sobre a interface Tempo ConectadoResultados


Após os resultados obtidos foram

selecionados 10 usuários que se

encaixavam no perfil desejado para a

avaliação da interface




Questionário



57% tinham mais de 31 anos

83% eram graduados

96% utilizavam a internet todos os dias

100% utilizavam a internet 4 horas ou mais

51% acessava na maioria dez vezes do trabalho e 48% de casa

21% utilizavam-se do serviço de Banking line, 20% de e-mails e 19% para downloads

59% Possuiam o Conta no Itaú

63%Conheceram o serviço de IB através do próprio banco

44% Utiliza o serviço de Consultas e 30% de Pagamentos

53% Navegam acham a interface regular e 46% Agradável





Após o questionário aplicado, foram selecionados 10 usuários com perfil adequado para a pesquisa de avaliação da

interface.

Esta etapa consistia numa livre inspeção do site para julgamento de cada um dos problemas percebidos

O documento era composto por uma tabela que continha a relação dos problemas mais relevantes encontrados e uma

escala que varia de 0 a 5. Esta escala representa os níveis de gravidade segundo a tabela GxUxT (Gravidade Urgência

e Tendência) de cada problema.

Para cada problema foi atribuído um valor da escala, marcando a célula correspondente ao nível de gravidade

percebido, esses números multiplicados por fim geram o valor final da pontuação.


Anexo 2






Avaliação Completa de um dos usuários, seleção dos 3 problemas mais pontuados.






Resultado das Análises

(itens com maiores pontuações):

1 - Listagem de Produtos por seção

sem divisões e subdivisões.

2 – Seção de Conta Corrente não foca

A consulta que foi a principal atividade

Apontada pelos questionários.

3 – Home com informações importantes

Pouco aparentes




Card Sorting

A técnica foi escolhida para descobrir como as pessoas priorizam a estrutura do site, ou seja, que estrutura

consideram ideal ,Após isso foram priorizadas as informações na home e no menu.


Foram utilizados 10 participantes,

sendo 4 que haviam feito já o

questionário final e 6 que não haviam

ainda feito nenhum dos testes. Os

cartões foram divididos por cores

para facilitar sua distribuição.

São elas:

- Home (cor laranja)

- Menu (cor cinza clara)

- Conta Corrente (cor cinza escura)




Aplicado para categorizar informações consideradas mais importantes pelos usuários tais informações foram

Refeletidas em áreas de prioridade na home, estruturação de menus de primeiro nível e segundo nível .

Card Sorting


Detalhe da ordenação feita pelos participantes.




Card Sorting


Detalhe da ordenação feita pelos participantes.

Após a ordenação foram tabulados os dados de todos os 10 participantes gerando uma primeria tabela, baseada na ordem

que cada item foi colocado.




Card Sorting





Card Sorting


Depois de ordenados,

os itens mais

pontuados em

determinada

localização eram

priorizados.

EX: o Menu para

primeira posição foi

ordenado por 8

participantes e

apenas 2 o

localizaram em

segundo.




Wireframe

Após a aplicação das técnicas, foi proposta a prototipagem da Home e da Seção de conta Corrente, áreas que foram

indicadas através dos questionários e análises feitas, ordenadas e distribuídas sob novas recomendações.


Anexo 3




Wireframe (Home)





Wireframe (Conta Corrente)





Focus Group

Foi aplicada validação dos wireframes, A técnica foi escolhida para abordar alguns pontos específicos.


Opinião dos participantes:

- Opção extrato com data digitada pelo usuário na área de

consultas com menos destaque, mais destaque para as

opções de dias.

- Produtos secundários na home e internas com uso de

imagem também podendo ser menores somente.

- Produtos na interna poderiam dividir o espaço com as

propagandas.




Conclusões

CONSIDERAÇÕES FINAIS

A avaliação teve diversos resultados positivos. Todos os usuários durante os vários processos de análise do site,

demonstraram sua capacidade de realizar as tarefas apontando o que a interface poderia oferecer para facilitar a

conclusão delas.

As técnicas escolhidas demonstraram-se eficientes para o resultado obtido. Através da construção de wireframes foquei

na usabilidade do site e como através dela poderia deixar o usuário mais adaptado a interface.

Com o crescimento do mercado bancário na internet, cada vez mais estudos como esse são importantes a fim de

aprimorar e facilitar as ações dos usuários e minimizar erros no desenvolvimento da interface.

Desdobramentos futuros

Baseado no Focus group reconstruir o wireframe com o que foi apontado.

Gostaria de aplicar os métodos e técnicas realizados em outras áreas do site. E também realizar a prototipagem

baseada na construção de wireframes do restante do site.




CONSIDERAÇÕES FINAIS

FIM

Technology

Recomendações de usabilidade e prototipagem de nova interface baseada na construção de wireframes