Webb 1
Case: Nova Intrawebb
Princípios de Usabilidade
Rio de Janeiro, 09 de abril de 2008
Otávio Souza
Webb 2
Agenda
 Princípios de Usabilidade
> Conceitos
> Objetivos
 Algumas Técnicas
> Exemplos (Abordagem macro)
 Case :...
Webb 3
Princípios de Usabilidade
EFICÁCIA X EFICIÊNCIA X SATISFAÇÃO
Webb 4
Alguns princípios de USABILIDADE:
 A usabilidade está relacionada aos estudos de Ergonomia e de Interação Humano-c...
Webb 5
Princípios de Usabilidade – Objetivos (relacionados a intrawebb)
 Tornar a interface mais simples e intuitiva.
 S...
Webb 6
Algumas técnicas mais utilizadas no estudo de USABILIDADE:
Cada perito deve interpretar qual (quais) técnica (s) se...
Case: Intrawebb
 Principal Canal de
Comunicação Interna
 Fonte de Informação
 Utilizada para captação de
materiais de v...
Webb 8
Intrawebb – Resultados dos questionários
 50% dos colaboradores responderam (232 pessoas em 2007)
 91% utilizava ...
Webb 9
Intrawebb – Questionários
 Classificação do grau de satisfação:
Webb 10
Intrawebb – Questionários
 Classificação do grau de importância das áreas:
Webb 11
Intrawebb – Tabela GxUxT
Tabela GxUxT
 A técnica permite uma avaliação participativa e fornece subsídios para sug...
Webb 12
Intrawebb – Tabela GxUxT
Tabela GxUxT
 Resultado da avaliação
 Prioridades
– Diferenciação de
cores entre as áre...
Webb 13
 Para a inspeção de usabilidade foram utilizados critérios ergonômicos para
avaliação de interfaces através de gu...
Webb 14
Princípio Utilizado: Equivalência entre o sistema e o mundo real
 Depois
– As áreas estão divididas em cores dand...
Webb 15
Princípio Utilizado: Consistência e padrões
 Depois
– Toda área foi utilizada simetricamente
evitando erros duran...
Webb 16
Princípio Utilizado: Controle do usuário e liberdade
 Depois
– Menu mais aparente e busca presente em todas as ár...
Webb 17
 Possibilitar que o usuário se localize sem precisar lembrar do caminho percorrido. Seção >> Sub-Seção
Princípio ...
Webb 18
 Distinguir entre cabeçalhos e campos
 Usar cor para dirigir a atenção, comunicar organização e para estabelecer...
Webb 19
 Para evitar erros cognitivos, maximizar o reconhecimento, dar consistência, prover recursos de auxílio à
memória...
Webb 20
 Prover um índice, com entrada tanto para os objetivos e tarefas do usuário, quanto para nomes de
operações.
 To...
Webb 21
Intrawebb – Fluxograma
 Fluxograma é um tipo de diagrama, e pode ser entendido como uma representação
esquemática...
Webb 22
Intrawebb – Fluxograma
Webb 23
Intrawebb – Wireframe
Wireframe
 Numa construção de Wireframe, o
arquiteto busca representar
esquematicamente tod...
Webb 24
Intrawebb – Wireframe
Principais Conceitos Trabalhados:
 Células de informação
 Fluxo de Navegação
 Áreas de Co...
Webb 25
Intrawebb – Wireframe
 Menu utilizado, permitindo que ganhe mais destaque assim como sua
subnavegação.
 Área de ...
Webb 26
Intrawebb – Wireframe
 Wireframe e sua associação ao layout
Webb 27
 A nova Intrawebb á baseada nos princípios de usabilidade considerando seus
conceitos, ajudando a dar:
– Maior di...
Princípios de Usabilidade – Case : nova Intrawebb
;) OBRIGADO
Webb 28
Otávio Souza
9 de abril de 2008
Próximos SlideShares
Carregando em…5
×

Análise de usabilidade de Intranet - Case: Nova Intrawebb

462 visualizações

Publicada em

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

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
462
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Análise de usabilidade de Intranet - Case: Nova Intrawebb

  1. 1. Webb 1 Case: Nova Intrawebb Princípios de Usabilidade Rio de Janeiro, 09 de abril de 2008 Otávio Souza
  2. 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. 3. Webb 3 Princípios de Usabilidade EFICÁCIA X EFICIÊNCIA X SATISFAÇÃO
  4. 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. 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. 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. 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. 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. 9. Webb 9 Intrawebb – Questionários  Classificação do grau de satisfação:
  10. 10. Webb 10 Intrawebb – Questionários  Classificação do grau de importância das áreas:
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. Webb 22 Intrawebb – Fluxograma
  23. 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. 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. 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. 26. Webb 26 Intrawebb – Wireframe  Wireframe e sua associação ao layout
  27. 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. 28. Princípios de Usabilidade – Case : nova Intrawebb ;) OBRIGADO Webb 28 Otávio Souza 9 de abril de 2008

×