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