Análise de usabilidade da intranet da empresa Webb (Intrawebb) e proposta para nova arquitetura da informação.

1. Webb 1
Case: Nova Intrawebb
Princípios de Usabilidade
Rio de Janeiro, 09 de abril de 2008
Otávio Souza

2. Webb 2
Agenda
 Princípios de Usabilidade
> Conceitos
> Objetivos
 Algumas Técnicas
> Exemplos (Abordagem macro)
 Case : Intrawebb
> Técnicas Utilizadas
> Documentação
> Fluxograma
> Wireframes

3. Webb 3
Princípios de Usabilidade
EFICÁCIA X EFICIÊNCIA X SATISFAÇÃO

4. Webb 4
Alguns princípios de USABILIDADE:
 A usabilidade está relacionada aos estudos de Ergonomia e de Interação Humano-computador.
 A usabilidade está diretamente ligada ao diálogo na interface e a capacidade em permitir que o
usuário alcance suas metas de interação com o sistema.
 USABILIDADE é a extensão na qual uma interface pode ser usada por usuários específicos
para alcançar objetivos específicos com efetividade, eficiência e satisfação. Eficiência se refere
à quantidade de esforço e recursos necessários para se chegar a um determinado objetivo.
 O design de web sites orientado a usabilidade é um processo que foca o usuário.
 A preocupação fundamental do Design na Web e do profissional que atua nessa área é agregar
os conceitos de usabilidade com o planejamento da interface, garantindo que o usuário final
atinja seus objetivos de forma intuitiva.
Princípios de Usabilidade

5. Webb 5
Princípios de Usabilidade – Objetivos (relacionados a intrawebb)
 Tornar a interface mais simples e intuitiva.
 Simplificar as ações do usuário para que ele conclua facilmente sua tarefa.
 Apresentar as informações de uma maneira bem planejada e estruturada, através
de uma navegação simples, com poucos elementos e funções mais aparentes.

6. Webb 6
Algumas técnicas mais utilizadas no estudo de USABILIDADE:
Cada perito deve interpretar qual (quais) técnica (s) se adapta (m) a interface a ser estudada.
 Avaliação Cooperativa
 Avaliação Heurística
 Questionários *
 Card Sorting
 Tabela GxUxT *
 Análise de Perito *
 Focus Group (Grupos de Foco) *
Princípios de Usabilidade – Técnicas

7. Case: Intrawebb
 Principal Canal de
Comunicação Interna
 Fonte de Informação
 Utilizada para captação de
materiais de venda e
apresentações.

8. Webb 8
Intrawebb – Resultados dos questionários
 50% dos colaboradores responderam (232 pessoas em 2007)
 91% utilizava a interface
 41% acessava diariamente
 20% desconhecem áreas como folhetos e suporte à venda
 56% avaliaram como satisfatória as informações sobre a oferta da
webb porém 20%indicaram dificuldade em encontrá-las.
 Por ordem de importância os colaboradores indicaram as seções:
RH, Administrativo, Treinamento, Clipping, Suporte/TI, Negócios
Webb, Home, Comunicação, Informações Úteis.
 Algumas seções/sugestões citadas foram:
> Layout mais intuitivo (3),
> Melhorar processo de atualização (3),

9. Webb 9
Intrawebb – Questionários
 Classificação do grau de satisfação:

10. Webb 10
Intrawebb – Questionários
 Classificação do grau de importância das áreas:

11. Webb 11
Intrawebb – Tabela GxUxT
Tabela GxUxT
 A técnica permite uma avaliação participativa e fornece subsídios para sugestões e conclusões.
Todos os problemas devem ser analisados e pontuados, de acordo com uma escala de valores
que varia do número 1 (menos grave, urgente ou tendencioso) ao número 5 (mais grave, urgente
ou tendencioso).Em seguida hierarquizam-se os resultados da pontuação.
 A Tabela foi utilizada na Intrawebb para priorizar as áreas que precisavam ser reavaliadas.

12. Webb 12
Intrawebb – Tabela GxUxT
Tabela GxUxT
 Resultado da avaliação
 Prioridades
– Diferenciação de
cores entre as áreas.
– Diferenciação entre
tópicos.
– Menu mais evidente
e intuitivo.

13. Webb 13
 Para a inspeção de usabilidade foram utilizados critérios ergonômicos para
avaliação de interfaces através de guidelines.
 Guidelines são um conjunto de princípios básicos e gerais sobre interação homem-
computador.
Inspeção através de Guidelines
 Foram utilizados 7 princípios:
– Equivalência entre o sistema e o mundo real
– Consistência e padrões
– Controle do usuário e liberdade
– Reconhecer ao invés de relembrar
– Flexibilidade e eficiência de uso
– Prevenção de Erro
– Ajuda e documentação

14. Webb 14
Princípio Utilizado: Equivalência entre o sistema e o mundo real
 Depois
– As áreas estão divididas em cores dando
maior referência às seções, tornando-a
mais intuitiva.
 Ser consistente com as associações que os usuários farão entre as cores e a realização de suas tarefas.
 Usar cor com propósitos e significados consistentes no sistema.
 Prover clara distinção visual entre áreas que tenham funções diferentes.
 Antes
– As áreas eram indicadas com uma única cor,
dificultando a associação da área com o que
era exibido para o usuário.

15. Webb 15
Princípio Utilizado: Consistência e padrões
 Depois
– Toda área foi utilizada simetricamente
evitando erros durante a navegação e os
links foram padronizados.
 Prover simetria e balanço pelo uso do espaço em branco ou não utilizados.
 Usar cores e estilos que sejam padrão para indicar links
 Antes
– Espaços não utilizados e links sem padrão.

16. Webb 16
Princípio Utilizado: Controle do usuário e liberdade
 Depois
– Menu mais aparente e busca presente em todas as áreas (a busca foi evidenciada devido a
importância na área do Quem é Quem segundo pesquisas internas como área mais acessada).
 Antes
– Menu e sub-menu pouco aparentes com difícil navegação.
 Entradas de comando visíveis pelo usuário completadas com uma ação de concordância: Escolher –
Selecionar.
 Entradas exercendo maior visibilidade para eficiência da tarefa.

17. Webb 17
 Possibilitar que o usuário se localize sem precisar lembrar do caminho percorrido. Seção >> Sub-Seção
Princípio Utilizado: Reconhecer ao invés de relembrar
 Antes
– Título da seção e área sem padrão e
sem ordem de prioridade
 Depois
– Título da seção e áreas divididas para
melhor localização, além do menu
selecionado ao clicar, os títulos das
áreas vem seguidos da seção.

18. Webb 18
 Distinguir entre cabeçalhos e campos
 Usar cor para dirigir a atenção, comunicar organização e para estabelecer relações.
Princípio Utilizado: Flexibilidade e eficiência de uso
 Antes
– Título da seção e área sem padrão visual
 Depois
– Títulos distintos para a seção, título do material e/ ou área

19. Webb 19
 Para evitar erros cognitivos, maximizar o reconhecimento, dar consistência, prover recursos de auxílio à
memória, minimizar cálculos mentais
 Facilitar a retro navegação
Princípio Utilizado: Prevenção de Erro
 Antes
– Botões e links não seguem padrão visual e não
são organizados – no formulário e outras áreas
 Depois
– Padronização visual e melhor
distribuição nas páginas dos links e
botões

20. Webb 20
 Prover um índice, com entrada tanto para os objetivos e tarefas do usuário, quanto para nomes de
operações.
 Tornar a ajuda visível, rápida e de simples retorno.
 Prover auxílios de navegação.
Princípio Utilizado: Ajuda e documentação*
 Antes
– Não existia mapa do site para organizar o
modelo utilizado no site quanto a navegação
das páginas.
– A principal página acessada o Quem é quem
com a busca de funcionários não tinha
destaque.
 Depois
– Inclusão do mapa do site, presente no
rodapé em todas as páginas, auxiliando a
navegação.
– Busca com destaque no topo, com fácil
acesso e link para a página.

21. Webb 21
Intrawebb – Fluxograma
 Fluxograma é um tipo de diagrama, e pode ser entendido como uma representação
esquemática de um processo, muitas vezes feita através de gráficos que ilustram
de forma descomplicada a transição de informações entre os elementos que o
compõem. Podemos entendê-lo, na prática, como a documentação dos passos
necessários para a execução de um processo

22. Webb 22
Intrawebb – Fluxograma

23. Webb 23
Intrawebb – Wireframe
Wireframe
 Numa construção de Wireframe, o
arquiteto busca representar
esquematicamente todos os
elementos que compõe a página,
textos , imagens, apllicativos que
são representados por variações
gráficas de elementos.
 O Wireframe é muito útil tanto no
desenvolvimento quanto em sua
documentação e futuras
consultas, além de valorizar muito
o trabalho sendo importante
quando se toca na questão de
usabilidade.
 Exemplo de Wireframe
(itaú bankline – pós -graduação Puc – Rio)
 Esta nova técnica não foi utilizada no
desenvolvimento da Intrawebb antiga, dificultando
a estrutura da informação e navegação durante
seu planejamento, não levando em consideração
nenhum princípio de usabilidade.

24. Webb 24
Intrawebb – Wireframe
Principais Conceitos Trabalhados:
 Células de informação
 Fluxo de Navegação
 Áreas de Conhecimento
Princípios Utilizados :
 Navegação
 Eficiência de uso
 Controle
 Persuasão

25. Webb 25
Intrawebb – Wireframe
 Menu utilizado, permitindo que ganhe mais destaque assim como sua
subnavegação.
 Área de busca com melhor localização.(Quem é Quem)
 Wireframe validado através de Focus Group

26. Webb 26
Intrawebb – Wireframe
 Wireframe e sua associação ao layout

27. Webb 27
 A nova Intrawebb á baseada nos princípios de usabilidade considerando seus
conceitos, ajudando a dar:
– Maior dinamismo de nosso conteúdo
– Melhor administração das áreas
– Notícias em tempo real
– Estrutura que facilita a conclusão das tarefas
– Fluxo de navegação coerente
– Layout de acordo com a postura adotada em nossos novos materias
– Usuário mais participativo
Nova Intrawebb 2008
EFICÁCIA X EFICIÊNCIA X SATISFAÇÃO

28. Princípios de Usabilidade – Case : nova Intrawebb
;) OBRIGADO
Webb 28
Otávio Souza
9 de abril de 2008