• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Usabilidade para Pequenos e Médios Projetos Web
 

Usabilidade para Pequenos e Médios Projetos Web

on

  • 9,544 views

Workshop para participantes do Amazonas Design – 1º Encontro Estadual de Design, Manaus, AM.

Workshop para participantes do Amazonas Design – 1º Encontro Estadual de Design, Manaus, AM.

Statistics

Views

Total Views
9,544
Views on SlideShare
6,607
Embed Views
2,937

Actions

Likes
58
Downloads
0
Comments
1

17 Embeds 2,937

http://marketingdrops.com.br 2369
http://www.bloglecom.com.br 263
http://moodle.pucrs.br 114
http://www.rhodesign.com.br 52
http://moodle2.iei.org.br 50
http://www.dicastrowebdesign.com 25
http://www.slideshare.net 18
http://innovart.com.br 15
http://www.andycastro.com.br 12
http://www.adm.esanet.org 7
http://www.ig.gmodules.com 4
http://www.netvibes.com 2
http://dicastrowebdesign.com 2
http://www.rapidsharego.com 1
http://tubemote.com 1
http://www.lmodules.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Exceclente apresentação! gostaria de obter uma copia para claudio@est.ipcb.pt,se não se importasse!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Usabilidade para Pequenos e Médios Projetos Web Usabilidade para Pequenos e Médios Projetos Web Presentation Transcript

    •  
    • Sobre a oficina...
      • Tema: Design de Interface + Usabilidade
      • Um “pouco” de Arquitetura da Informação
      • Nosso foco está nos sites
      • Infelizmente, não falaremos de testes
      • Métodos: “o que”, “por quê” e “como”
    • Definições
    • HCI “ O comportamento humano não é sempre igual, mas cheio de surpresas, o que dificulta o estabelecimento de “simples verdades” sobre o que esperar das pessoas em determinadas situações”. Lin (1994).
    • HCI...
      • É uma disciplina maior que engloba o relacionamento físico-psicológico da interação homem-máquina
      • Busca desenvolver um modelo teórico de performance humana
      • Criar ferramentas capazes de medir a facilidade de uso
    • HCI...
      • Estudos nas áreas de:
        • Ergonomia
        • Projeto de Produto
        • Desempenho
        • Arquitetura da Informação
        • Usabilidade
        • Engenharia Semiótica
        • Design Gráfico...
    • Arquitetura da Informação
      • É a arte e ciência de estruturar e organizar sistemas de informação para auxiliar as pessoas a alcançarem seus objetivos
      • Sistemas de Organização:
      • Modelo Mental x Mapa de Conteúdo
      • Categorizar Informação:
      • Local , Alfabeto , Tempo , Categoria e Hierarquia
    • Arquitetura da Informação...
      • Foco em:
        • Organização
        • Navegação
        • Rotulagem
        • Sistema de Busca
      • “ Tornar o complexo claro”
        • Richard Saul Wurman
    • Arquitetura da Informação... Conteúdo Contexto do Negócio Usuários AI
    • (Engenharia de) Usabilidade
      • “ Conceito utilizado para descrever a qualidade da interação de uma interface diante de seus usuários”. Hix (1993)
      • “ Capacidade, em termos funcionais humanos, de um sistema ser usado facilmente e com eficiência pelo usuário”. Shackel (1993)
    • (Engenharia de) Usabilidade... “ Está diretamente ligada ao diálogo na interface . É a capacidade do software permitir que o usuário alcance suas metas de interação com o sistema ”. Scarpin (1993).
    • Processo de comunicação... Emissor / Receptor Meio de Propagação Mensagem Resposta Canal de Propagação Ambiente
    • ...no contexto da interface Usuários + User Agent Web Conteúdo Resposta / Transformação Interface Ambiente social
    • Usabilidade
      • Para Nielsen, é composta de 5 atributos:
        • Ser fácil de aprender
        • Ser eficiente em sua utilização
        • Ser fácil de ser recordado
        • Ter poucos erros
        • Ser subjetivamente agradável
      • Em poucas palavras:
        • Bom Senso + Princípios-Chave
    • Desmistificando a Usabilidade
    • Mito 01
      • “ Usabilidade é a chave para o sucesso de um projeto web”
        • É só uma parte da Experiência do Usuário
        • O objetivo final pode valer o esforço
        • Conteúdo é Rei!
        • Se não for relevante, não vejo
    • Mito 01
      • “ Usabilidade é a chave para o sucesso de um projeto web”
        • É só uma parte da Experiência do Usuário
        • O objetivo final pode valer o esforço
        • Conteúdo é Rei!
        • Se não for relevante, não vejo
      Estratégia do Produto Experiência do Usuário Design de Interface Modelo de Negócios Atendimento ao Consumidor, Embalagem, Marketing, Gerenciamento de Conteúdo, Design Industrial, Design de Interiores, etc. Oportunidades Tecnológicas e Limitações Necessidades do Usuário Objetivos do Negócio Design Gráfico Design de Informação Design de Interação Arquitetura da Informação Wroblewski (2006)
    • Mito 01
      • “ Usabilidade é a chave para o sucesso de um projeto web”
        • É só uma parte da Experiência do Usuário
        • O objetivo final pode valer o esforço
        • Conteúdo é Rei!
        • Se não for relevante, não vejo
      Duney, Landay e Hong (2003) Design Centrado no Usuário Facilidade de Uso Conteúdo Performance Satisfação Valor da Marca
    • Chak (2004) Disponibilidade Usabilidade Confiança Desejo Disposição para realizar uma transação
    • Mito 02
      • “ Usabilidade não vence um conceito criativo”
        • Quem é o seu público-alvo?
        • O que ele deseja no seu site?
        • Experiências Imersivas funcionam, mas são temporárias
        • Não é uma disputa. É parceria!
    • Mito 03
      • “ Jakob Nielsen é o pai da usabilidade”
        • HCI está por aí desde os primeiros softwares
        • Nielsen popularizou o conceito de usabilidade
        • Foi um expoente para agregar essas metodologias ao design de interface na rede
        • Ele é o tio legal que te apresenta aos amigos!
    • Mito 04
      • “ Usabilidade é um conjunto de regras. Decorou, usou!”
        • Não são regras, são conceitos
        • Métodos servem como guias, não como muros
        • A complexidade avança com a necessidade
        • É casada com Arquitetura da Informação
    • Uma questão de Bom-Senso
    • Princípios da Usabilidade
      • O usuário nunca está errado!
      • Relação entre o mundo real x mundo virtual
      • Hierarquização e relacionamento visual claros
      • Torne óbvio o que é “clicável”
      • Cada clique tem um preço
    • Elementos da Navegabilidade... Memória (2005) Nielsen, Krug e Lynch e Horton Parte inferior Navegação de rodapé Bernard Área central Conteúdo global e contextual Adkisson, Lida e Chaparro e Krug Parte superior, abaixo da marca da empresa Breadcrumbs Nielsen, Adkisson e Bernard Coluna da esquerda Navegação Local Nielsen, Adkisson e Krug Parte superior com links na horizontal Navegação Global Nielsen, Adkisson e Bernard Parte superior Busca Nielsen, Adkisson e Bernard Canto superior esquerdo Marca da Empresa Pesquisador Posicionamento Elemento de Interface
    • ...velhos conhecidos! Marca Navegação local Navegação Global Navegação de rodapé Breadcrumbs Conteúdo Global e contextual Conteúdo relacionado Search
    • Dicas para o Design de Interface
      • Usuários não lêem a sua página... Escaneiam!
      • “ Teste do Porta-Malas” (presente do Steve Krug)
        • Que site é este? Identificação do site
        • Em que página estou? Nome da página
        • Quais são as seções principais desse site? Seções
        • Quais são minhas opções neste nível? Navegação local
        • Onde estou no esquema das coisas? Indicadores
        • Como posso procurar? Busca
    • Dicas para o Design de Interface
      • Quanto já andei? Links visitados (Nielsen)
      • Home-page : um caso particular
        • O que é isso?
        • O que posso fazer aqui?
        • Por que aqui e não em outro lugar?
        • Por onde eu começo?
      • Acima do scroll , de frente pro mar!
    • Heurísticas e Guidelines
    • Conceito Heurísticas > Guidelines > Padrões Dix (1999)
    • Heurísticas: regras gerais
      • Para Preece (1994) e Hobbs (1996):
        • Conheça seu usuário
        • Reduza a carga cognitiva
        • Projete para os erros
        • Mantenha consistência e clareza
    • “ Os 10 mandamentos”
      • Para Nielsen e Molich (1990):
        • Diálogo simples e natural;
        • Fala a língua do usuário;
        • Minimiza a carga cognitiva do usuário;
        • Consistência;
        • Feedback;
    • “ Os 10 mandamentos”...
      • Para Nielsen e Molich (1990):
        • Saídas marcadas claramente;
        • Atalhos (flexibilidade);
        • Mensagens de erro precisas e construtivas;
        • Prevenção de erros;
        • Ajuda e Documentação.
    • Metodologias do Design de Interface
    • Mito 01
      • “ Usabilidade é a chave para o sucesso de um projeto web”
        • É só uma parte da Experiência do Usuário
        • O objetivo final pode valer o esforço
        • Conteúdo é Rei!
        • Se não for relevante, não vejo
      Duney, Landay e Hong (2003) Avaliação Design Prototipagem Levantamento de Dados Manutenção Produção Refinamento Criação Implementação
    • Tempo e Recursos limitados
      • Voltando a realidade...
        • Seu cliente pode não ter muitos recursos
        • O prazo pode ser curto
        • Equipe pequena
        • Testes estão fora de cogitação
      • Você pode entregar um produto de qualidade
      • Construir as peças do quebra-cabeça
    • Mito 01
      • “ Usabilidade é a chave para o sucesso de um projeto web”
        • É só uma parte da Experiência do Usuário
        • O objetivo final pode valer o esforço
        • Conteúdo é Rei!
        • Se não for relevante, não vejo
      Duney, Landay e Hong (2003) Avaliação Design Prototipagem Levantamento de Dados Manutenção Produção Refinamento Criação Implementação
    • Mito 01 www.usabilitynet.org/tools/methods.htm
    • Mito 01 www.usabilitynet.org/tools/methods.htm
    • Documentação: assunto sério
      • Geralmente documentos são entregas
      • Toda documentação deve atender a normas:
        • Formatação
        • Respeitabilidade
        • Consistência
        • Controle (autor e versão)
    • Personas
    • Personas
      • Também conhecido por:
        • Perfil do Usuário ( user profiles )
        • Representação do Usuário ( user role definitions )
        • Perfil da Audiência ( audience profile )
    • Personas
      • O que?
        • Uma representação dos usuários focais do produto, descritos como pessoas reais, apresentando motivações e necessidades.
    • Mito 01 Brown (2006)
    • Personas
      • Por quê?
        • Seria o target em marketing (herança)
        • Norteia as ações dos envolvidos
        • Devem ser frutos de pesquisas e estatísticas
        • Expressar o que o usuário quer e deseja
        • Apoio para construção de cenários
    • Personas
      • Como?
        • Representar possíveis usuários (categorizar)
        • Definir suas Motivações e Necessidades
        • Com relação ao sistema: cenários , comportamentos e citações
        • 3 tipos e momentos distintos...
    • Perfil dos Usuários
      • Dados:
        • Tipo de Usuário
        • Classificação
        • Citação
        • Descrição
    • Mito 01 Brown (2006)
    • Detalhamento do Usuário
      • Dados:
        • Tipo de Usuário
        • Classificação
        • Citação
        • Descrição
    • Mito 01 Brown (2006)
    • Personas
      • Dados:
        • Tipo de usuário
        • Dados pessoais (até mesmo estimativas)
        • Conhecimento técnico
        • Necessidades (com relação ao site)
        • Adaptar Detalhamento do Usuário ou descrever possível uso da ferramenta pelo usuário (presente e/ou futuro)
    • Mito 01 Brown (2006)
    • Personas 50% pessoal + 20% técnico + 30% relacionamento com o site
      • Receita de Bolo (Dados):
    • Aplicando...
    • Análise Competitiva
    • Análise Competitiva
      • Também conhecido por:
        • Benchmark
        • Análise da Concorrência
    • Análise Competitiva
      • O que?
        • Uma breve análise de projetos similares ao que você está trabalhando. As semelhanças entre os modelos de negócio e o design de interface devem ser destacadas e as diferenças , comparadas
    • Mito 01 Brown (2006)
    • Análise Competitiva
      • Por quê?
        • Conhecer categorias, nomenclaturas e padrões de fluxo.
        • Descobrir bons modelos (convenções) e pontos de falha.
        • O que foi e como (não) foi explorado?
        • Avaliação dos elementos de navegabilidade
    • Análise Competitiva
      • Como?
        • Depende do seu foco
        • 3 grandes abordagens: navegabilidade, conteúdo e funcionalidades
        • Matriz: elemento analisado x concorrência
        • Concluir com documentação das conclusões
        • Pode-se trabalhar com...
    • Presença
    • Pontuação (macro ou detalhada)
    • Funcional (macro ou detalhada)
    • Navegabilidade (descritiva)
    • Navegabilidade (estrutural)
    • Modelo Conceitual
    • Modelo Conceitual
      • Também conhecido por:
        • Mapa Conceitual ( concept maps )
        • Diagrama de Afinidade ( affinity diagram )
    • Modelo Conceitual
      • O que?
        • Um diagrama para apontar os relacionamentos entre os usuários , o conteúdo e as funcionalidades existentes.
        • É uma visão macro de como os elementos e as entidades “ conversam ”.
    • Mito 01
    • Mito 01
    • Mito 01
      • Por quê?
        • Funciona mais com sites que tenham aplicações
        • Para dar substância às idéias
        • Ajuda na categorização das tarefas do site
        • Checar possíveis desdobramentos
        • Avalia o “poder” de cada tipo de usuário
      Modelo Conceitual
      • Como?
        • Comece pelos usuários
        • Adicione conteúdo e funcionalidades do site ( nós )
        • Nós (nodes) podem representar:
          • - Tipos de conteúdo - Grupos ou Categorias
          • - Processos - Pessoas, entidade ou atores
          • - Eventos - Sistemas e etc...
        • Função do nó: representação gráfica
      Modelo Conceitual
    • Mito 01
      • Como...?
        • Conecte-os através de ações ( conectores )
          • Costumam a ser descritivos (verbos)
          • ***** procura por **** ( ativo ) ou ***** é procurado por ***** ( passivo )
        • Determine a direção do fluxo e os mais importantes
        • Essas linhas também podem falar ( legenda )
      Modelo Conceitual
    • Mito 01
    • Mito 01
    • Mito 01
    • Mito 01
    • Mito 01
    • Aplicando...
    • Levantamento de Conteúdo
    • Levantamento de Conteúdo
      • Também conhecido por:
        • Análise do conteúdo ( content analysis )
        • Auditoria do conteúdo ( content audit )
      • O que?
        • Uma lista de toda informação contida em um site , descrevendo a informação sobre uma série de pontos de vista (como audiência , prioridade , localização e responsabilidade ).
      Levantamento de Conteúdo
      • Por quê?
        • Esse documento vai salvar a sua vida !
        • Define a responsabilidade , tipo e complexidade do conteúdo.
        • Ajuda a definir templates e páginas dinâmicas
        • É o principal apoio na construção do mapa do site
        • Foca sua preocupação na interface
      Levantamento de Conteúdo
      • Como?
        • Mais do que uma planilha
        • Categorizar os dados : nome da página , tipo de conteúdo , localização ...
        • Não há uma “receita de bolo” – avaliar parâmetros
        • “ Responsável ” é a coluna mais importante
        • Usar IDs é sempre uma boa idéia
      Levantamento de Conteúdo
    • Visão Macro
    • Levantamento Detalhado
    • Foco na Atualização
    • Mapa do Site
    • Mapa do Site
      • Também conhecido por:
        • Modelo Estrutural ( structure model )
        • Mapa ou árvore semântica ( semantic map)
        • Modelo Navegacional ( navigation model )
      • O que?
        • Uma representação visual da estrutura do site .
        • Apresentação de todas seções e subseções, apresentado as conexões entre os diversos conteúdos em níveis diferentes .
        • Geralmente organizada na forma de fluxograma no sentido vertical .
      Mapa do Site
    • Mito 01
    • Mito 01
    • Mito 01
    • Mito 01
    • Mito 01
    • Mito 01
      • Por quê?
        • Na forma mais simples, um site é uma coleção de informações e funcionalidades
        • Define níveis e hierarquias visualmente
          • Ajuda na visualização
          • Lembra da contagem de cliques ? Avaliação rápida aqui
        • Ajuda a mapear as ações mais importantes
        • Evita problemas futuros
      Mapa do Site
      • Como?
        • É um organograma
        • Sair sempre da Home-page
        • Buscar uma profundidade máxima de 4 / 5 níveis
        • Definir as rotas possíveis de navegação
        • Jesse James Garret e seu Vocabulário Visual
          • http://www.jjg.net/ia/visvocab
          • Mapas de Fluxo
      Mapa do Site
    • Mapas de Fluxo
    • Mapas de Fluxo...
    • Card Sorting: teste com usuário Modelo Mental!
    • Card Sorting...
    • Aplicando...
    • Prototipagem
    • Prototipagem
      • Também conhecido por:
        • Wireframes
        • Blueprints
      • Pode derivar em:
        • Storyboard
      • O que?
        • Uma versão simplificada de como o conteúdo irá aparecer em cada tela do produto final , desprovido de qualquer elemento tratamento visual.
      Prototipagem
    • Mito 01 Brown (2006)
      • Por quê?
        • Montando o esqueleto
        • Foco na navegabilidade
        • Conteúdo: áreas , descrição e prioridades .
        • Checa as opções em curto espaço de tempo
        • Descobrindo padrões de interação
        • Facilita o projeto visual da interface
      Prototipagem
      • Como?
        • PowerPoint , Visio ou até mesmo XHTML(?)
        • Ponto de partida: Home-page
        • Comece simples, depois aumente a complexidade
          • Baixa, Média e Alta Fidelidade
          • Case “UCRG” – Protótipo e Projeto Visual
        • Pode ser horizontal e vertical
          • Case “ Americanas.com ”
        • Storyboard (foco na tarefa)
      Prototipagem
    • Prototipagem Horizontal
    • Prototipagem Vertical
    • Paper prototyping
    • Aplicando...
    • E sobre testes? Nada mesmo?
    • Testes de Usabilidade Case: Jornal do Brasil Puc-Rio (2002) Avaliação Conclusões
    • Bibliografia
      • Não me faça pensar , Steve Krug
      • Projetando Web Sites , Jakob Nielsen
      • Como Criar Sites Persuasivos , Andrew Chak
      • Design para a Internet , Felipe Memória
      • Communicating Design , Daniel M. Brown
      • Emotional Design , Don Norman
      Bibliografia
    • Obrigado! [email_address] www.paulocoimbra.com Em breve: