Download - 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
Análise do site www.itau.com.br Otávio Souza
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.
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
Análise do site www.itau.com.br Otávio Souza
| PUC – RIO
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.
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
Análise do site www.itau.com.br Otávio Souza
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.
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
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.
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
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.
Objetivo
Melhorar a interface do Internet Banking do Itaú. Facilitando a Conclusão de tarefas pelos usuários.
INTRODUÇÃO
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.
MÉTODOS E TÉCNICAS
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.
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.
MÉTODOS E TÉCNICAS
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.
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.
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.
MÉTODOS E TÉCNICAS
2ª fase – Aplicação :
Foi relacionado com base nos princípios estudados os problemas encontrados na interface do itaú, a seguir apontados.
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.
Análise de Perito
MÉTODOS E TÉCNICAS
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.
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.
Análise de Perito
MÉTODOS E TÉCNICAS
Príncípio Utilizado:
- 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
Área analisada (Justificativa):
Internas
- Texto sem formatação indicando que é um link
- Retrancas Utilizadas confundem-se com a função
exercida pelo seus sub-itens.
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.
Análise de Perito
MÉTODOS E TÉCNICAS
Príncípio Utilizado:
- Prevenção de Erro
Minimizar Erros de percepção através
de apresentação eficiente das
informações.
Área analisada (Justificativa):
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.
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.
Análise de Perito
MÉTODOS E TÉCNICAS
Príncípio Utilizado:
- 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
Área analisada (Justificativa):
Home / Internas
- Áreas sem distinção visual, com
conteúdos totalmente diferentes.
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.
Análise de Perito
MÉTODOS E TÉCNICAS
Príncípio Utilizado:
- 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.
Área analisada (Justificativa):
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.
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.
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.
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.
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)
MÉTODOS E TÉCNICAS
Anexo 1
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.
Questionário
MÉTODOS E TÉCNICAS
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
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.
Questionário
Tabulação dos resultados obtidos através dos questionários:
Locais de Acesso Recursos mais utilizados
Internet Banking que possui Tempo ConectadoComo teve conhecimento do Internet Banking
MÉTODOS E TÉCNICAS
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.
Questionário
Tabulação dos resultados obtidos através dos questionários:
Serviços Utilizados Grau de Facilidade
Sobre a interface Tempo ConectadoResultados
MÉTODOS E TÉCNICAS
Após os resultados obtidos foram
selecionados 10 usuários que se
encaixavam no perfil desejado para a
avaliação da interface
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.
Questionário
MÉTODOS E TÉCNICAS
Tabulação dos resultados obtidos através dos questionários:
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
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.
Análise da Interface
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.
MÉTODOS E TÉCNICAS
Anexo 2
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.
Análise da Interface
MÉTODOS E TÉCNICAS
Avaliação Completa de um dos usuários, seleção dos 3 problemas mais pontuados.
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.
Análise da Interface
MÉTODOS E TÉCNICAS
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
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.
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.
MÉTODOS E TÉCNICAS
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)
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.
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
MÉTODOS E TÉCNICAS
Detalhe da ordenação feita pelos participantes.
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.
Card Sorting
MÉTODOS E TÉCNICAS
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.
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.
Card Sorting
MÉTODOS E TÉCNICAS
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.
Card Sorting
MÉTODOS E TÉCNICAS
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.
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.
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.
MÉTODOS E TÉCNICAS
Anexo 3
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.
Wireframe (Home)
MÉTODOS E TÉCNICAS
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.
Wireframe (Conta Corrente)
MÉTODOS E TÉCNICAS
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.
Focus Group
Foi aplicada validação dos wireframes, A técnica foi escolhida para abordar alguns pontos específicos.
MÉTODOS E TÉCNICAS
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.
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.
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.
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.
CONSIDERAÇÕES FINAIS
FIM