Análise de usabilidade de Intranet - Case: Nova Intrawebb
-
Upload
otavio-souza -
Category
Documents
-
view
127 -
download
1
Transcript of Análise de usabilidade de Intranet - Case: Nova Intrawebb
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 : Intrawebb
> Técnicas Utilizadas
> Documentação
> Fluxograma
> Wireframes
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-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
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.
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
Case: Intrawebb
Principal Canal de
Comunicação Interna
Fonte de Informação
Utilizada para captação de
materiais de venda e
apresentações.
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),
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 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.
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.
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
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.
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.
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.
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.
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
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
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.
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
Webb 22
Intrawebb – Fluxograma
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.
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
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
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 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
Princípios de Usabilidade – Case : nova Intrawebb
;) OBRIGADO
Webb 28
Otávio Souza
9 de abril de 2008