design para web heloisa vieira da rocha ic/nied- unicamp tutorial por que estudar ihc?

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


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


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


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/


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


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.



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.



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


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.


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


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


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!


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


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


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?


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


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


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


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


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


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


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


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

design para web heloisa vieira da rocha ic/nied- unicamp tutorial por que estudar ihc?

Documents