Design para WEB Heloisa Vieira da Rocha IC/NIED- UNICAMP Tutorial Por que estudar IHC?

Apresentação em tema: "Design para WEB Heloisa Vieira da Rocha IC/NIED- UNICAMP Tutorial Por que estudar IHC?"— Transcrição da apresentação:

1 Design para WEB Heloisa Vieira da Rocha IC/NIED- UNICAMP Tutorial Por que estudar IHC?

2 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

3 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

4 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

5 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

6 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/

7 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

8 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.

9 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.

10 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

11 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.

12 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

13 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

14 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!

15 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.....”

16 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....”

17 WEB Arquitetura de sites

18 To find a form that accomodates the mess, that is the task of artist now. Samuel Beckett

19 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?

20 Por que estudar IHC ?

21

22 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

23 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

24 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

25 Por que estudar IHC ?

26

27 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

28 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

29 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

30 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

31 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