View
108
Download
0
Category
Preview:
Citation preview
Design para WEBHeloisa Vieira da Rocha
IC/NIED- UNICAMP
TutorialPor que estudar IHC?
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
Por que estudar IHC ?
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 Crianças
Por que estudar IHC ?
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. Quer fazer dinheiro com a WEB
2. Quer coletar informações sobre consumidores
3. Quer vender a enorme sobra de estoque do disco da XX.
USUÁRIO
1. Quer comprar com segurança
2. Quer manter sua privacidade
3. 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 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
1. Fica chateado de ter que 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....”
WEB
Arquitetura de sites
Arquitetura de sites
To find a form that accomodates the mess, that is the task of artist now.
Samuel Beckett
Por que estudar IHC ?
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 a arquitetura pode crescer e como novo conteúdo pode ser adicionado
Essencial para manter um crescimento consistente
Recommended