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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

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

Semelhante a Recomendações de usabilidade e prototipagem de nova interface baseada na construção de wireframes (20)

Mais de Otávio Souza

Mais de Otávio Souza (13)

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