Tutorial
Por que estudar IHC?
Design para WEB
Heloisa Vieira da Rocha
IC/NIED- UNICAMP
Design para os usuários
Do not do unto others as you would they should do unto
you. Their tastes may not be the same
Bernard Shaw
WEB
 O que torna a WEB um meio ativo?
 Como percebemos a WEB?
 Um
espaço para se mover
 Um ambiente que podemos mudar
 Um lugar onde conseguimos que coisas
sejam feitas
Por que estudar IHC ?
O que incomoda no uso da WEB?
 Velocidade (delays)
 Falta de confiança
 Dead ends
 Facilidade em se perder
 Necessidade de plug-ins
 Dificuldade de ler
Por que estudar IHC ?
Conhecer o usuário
 Nada substitui o contato humano
 Surveys podem ajudar
 Georgia Tech´s Graphics, Visualization, and Usability
(GVU) Center
 Mais de 1/3 dos usuários da internet se conectaram
pela primeira vez no último ano
 60% das pessoas se conectam usando um modem de
33.6 kbps ou menos
 Mais de 20% não tem certeza sobre a velocidade de
sua conexão. Aproximadamente 40% não tem idéia
sobre qual a resolução de seu monitor. 20% não tem
idéia do que é um cookie
Por que estudar IHC ?
GVU Survey
 Maioria teve uma experiência insatisfatória em sites
de compras:



Páginas lentas para carregar
Páginas desorganizadas e confusas
Não conseguiram encontrar o que estavam
procurando
 Navegação é o terceiro item crítico no uso da
Internet, perdendo apenas para privacidade e
segurança

http://www.gvu.gatech.edu/user_surveys/
Por que estudar IHC ?
Definindo a audiência
 Sem um esboço claro da audiência é impossível
predizer o que necessitam

Ex.: audiência para um site de vendas de brinquedos
 Pais




Trabalham ou não?
Com orçamento folgado ou não?
Construtivistas ou não?
.....
 Audiência múltipla
 Loja de brinquedos




Professores
Pais
Parentes e amigos
Por que estudar IHC ?
Crianças
Definindo a audiência –Loja de brinquedos
 Pais
 Custo
 Segurança
 Durabilidade
 Tempo de compra
 Prover um tour pela loja destacando como obter descontos e
compromissos de segurança, incluindo testes de durabilidade e
segurança feitos com crianças. Design de caminhos rápidos de
compra para pais ocupados, e prover oportunidade de fazer
parcelamento eletronicamente.
Por que estudar IHC ?
Definindo a audiência –Loja de brinquedos
 Professores
 Custo
 Segurança
 Valor educacional
 Idéias curriculares
 Criar um canto educacional ou de professores no site. Oferecer
estórias de sucesso de outros professores que construíram uma
ampla coleção de brinquedos comprando eletronicamente e
com descontos. Adicionar um fórum para professores trocarem
idéias. Disponibilizar informação sobre segurança e escala de
valor educacional nas telas de brinquedos, e permitir a busca
por estes campos.
Por que estudar IHC ?
Definindo a audiência –Loja de brinquedos
 Parentes e amigos
 Idéias de presentes
 Faixa de idade
 Custo e tempo da entrega
 Embrulho para presente
 Oferecer uma central de Presentes para dicas e idéias de
compra. Incluir faixa etária nas telas de brinquedos, e se
possível possibilitar a busca por idade e interesses. Prover uma
FAQ de compras para responder perguntas sobre pacotes de
presente e custos de entrega antes da pessoa entrar no
checkout
Por que estudar IHC ?
Definindo a audiência
 Crianças
 Moda/novidades
 O quanto é divertido
 Brinquedos semelhantes
 Permissões/formas de
pagamento
 Criar uma área só para crianças no site com conteúdo editorial
especial: relatos e notas dadas aos brinquedos por outras
crianças. Criar uma área para mostrar os novos lançamentos.
Em toda tela de um brinquedo prover links para itens
relacionados. Informar se crianças podem ou não comprar
online.
Por que estudar IHC ?
Design centrado no usuário
 A “doença da familiaridade”
 Engenharia da Usabilidade


Heurísticas podem e devem ser usadas no
design para WEB
Parte essencial da “caixa de ferramentas” do
designer
 Design participativo
 Teste com o usuário
Por que estudar IHC ?
Design para os objetivos do
usuário
SITE
1.
2.
3.
USUÁRIO
Quer fazer dinheiro com a
WEB
Quer coletar informações
sobre consumidores
Quer vender a enorme
sobra de estoque do disco
da XX.
1.
2.
3.
Quer comprar com
segurança
Quer manter sua
privacidade
Quer comprar o novo
lançamento da GC
Por que estudar IHC ?
Design para os objetivos do
usuário
1. Requer que o usuário passe
1. Fica chateado de ter que
pela seção de descontos para
que veja o disco da XX em
oferta
2. Corre com o usuário para o
checkout e o prende no
processo de compra
3. Pergunta informações
pessoais sobre preferências,
hábitos de compra e renda
passar pela seção de
ofertas porque só quer
comprar o novo disco da
GC.
2. Fica em pânico ao entrar na
seção de checkout porque
suas questões sobre
segurança ainda não foram
respondidas e não existe um
modo simples de mudar de
idéia
3. Se enfurece com as
perguntas pessoais. Isso
não é da sua conta!
Por que estudar IHC ?
Design para os objetivos do
usuário – Como fazer?
 Criando profiles
 Estudo breve das pessoas que poderão visitar seu site

Brainstorming profile
 Ex. site de encontros:
“Jorge tem cerca de 40 anos. Ele trabalha o dia todo em
uma companhia de seguros e se divorciou
recentemente. Ele está “louco” para retornar a cena de
solteiro. Ele mora em uma pequena cidade e portanto
privacidade é essencial. Ele está interessado em
encontrar uma pessoa de sua religião, que goste de
ópera.... Ele irá acessar o site de seu computador em
casa, que tem alguns anos de uso e tem uma conexão
lenta com a rede.....”
Por que estudar IHC ?
Design para os objetivos do
usuário – Como fazer?
 Pensando em cenários
 Situações possíveis que podem dar uma visão do
processo de navegação como um todo
 Visão do site como um espaço ativo onde as pessoas
irão se mover

Ex.: site de encontros
“Jorge está pronto para se inscrever em um site de
encontros. Ele conecta com a rede de sua casa e
entra no site. Ele está um pouco nervoso com todo o
processo. Ele olha para algumas instruções sobre
como o site funciona e gostaria de testar o serviço
antes de se inscrever. Ele procura por alguma garantia
de segurança sobre sua privacidade....”
Por que estudar IHC ?
WEB
Arquitetura de sites
Arquitetura de sites
To find a form that accomodates the mess, that is the task
of artist now.
Samuel Beckett
O problema de organizar
 Agrupar coisas é prover caminhos para a
informação a partir de seus relacionamentos

Muzzarella está na seção de queijos que está
na seção de .....
 Organizar o conhecimento ?
 Não é constituído de simples relacionamentos
lineares
 É uma confusão de coisas inter-relacionadas
 Quais relações são as mais importantes?
Por que estudar IHC ?
Por que estudar IHC ?
Por que estudar IHC ?
Relacionamentos são subjetivos
 Exercício

Organizar os seguintes itens:

Refrigerador, meias, sala de estar, dicionário,
cozinha, leite, cômoda, estante de livros, quarto
Por que estudar IHC ?
Organização não tem padrões
 Organizar informação é uma tarefa subjetiva

Baseada na experiência, contexto e
conhecimento de quem organiza
 Livrarias e bibliotecas
 Não existem padrões para a WEB

Necessário um plano

Audiência alvo
Por que estudar IHC ?
Organização define o conteúdo
 Balancear o como a informação “requer” ser
organizada com o como o usuário quer encontrar a
informação
 Como organizamos nossos diretórios

Tentar encontrar algum arquivo no computador de
outra pessoa!
 3 fatores principais na forma de organização
individual:


Tempo, freqüência de uso e aleatório puro
Não se pode simplesmente transpor isso para um site
Por que estudar IHC ?
Por que estudar IHC ?
Por que estudar IHC ?
Construindo sua infra- estrutura
 Balanceamento entre largura e profundidade
 Dependendo do conteúdo do site

Shallow site structure


Mais escolhas na entrada e poucos níveis para
as outras categorias
Deep site structure


Poucas escolhas na entrada mas muitos níveis
para navegação
http://www.yahoo.com
Por que estudar IHC ?
Necessidade de atalhos
 Mecanismo de busca
 thesaurus
 Tabela de conteúdos (TOC)
 Mostra a estrutura do site textualmente
 Torna a estrutura do site clara para os usuários
 Índice do site
 Lista de A-Z do conteúdo do site
 Mapa do site
 Representação gráfica da estrutura do site
 Tempo de download pode ser problema
 Pull-down menu
Por que estudar IHC ?
O processo de definição da
arquitetura
 Fase 1 – Pesquisa




Encontros face-a-face com o cliente
Críticas de sites pelo cliente
Lista de desejos e levantamento do conteúdo
Content chunking – cartões índice


Com a equipe
Com os clientes
Por que estudar IHC ?
O processo de definição da
arquitetura
 Fase 2 – Design conceitual
 Fase de geração de idéias
 Quadro branco para brainstorming do grupo
 Flip charts
 Exploração de metáforas
 Cenários
 Esquema da arquitetura do site em alto-nível
 High-level architeture blueprints



Maquetes das páginas
Design sketches
Protótipos Web-based
Por que estudar IHC ?
O processo de definição da
arquitetura
 Fase 3 – Produção e Operação
 Foco na manutenção e consistência

Esquema detalhado da arquitetura
 Mapa do site
 Bem detalhado da estrutura mais geral para páginas
específicas
 Mostrar claramente rótulos e navegação

Mapeamento do conteúdo
 Onde estão os documentos que irão compor o conteúdo

Points-of-production architeture
 Decisões pequenas sobre a arquitetura e/ou conteúdo

Guia de estilo da arquitetura (Architeture style
guides)
 Documento que mostra como o site está organizado, como
Por que
estudar IHCe
? como novo conteúdo pode
a arquitetura pode
crescer
ser adicionado