SlideShare uma empresa Scribd logo
1 de 29
Baixar para ler offline
Noções de Design Gráfico


Unidade III – Usabilidade e
     Acessibilidade



                        Prof. Nécio de Lima Veras
         http://lattes.cnpq.br/8284657916723590
Objetivo

Visualizar os conceitos sobre usabilidade e
               acessibilidade




        Página da disciplina na Web
                               Prof. Nécio de Lima Veras
                http://lattes.cnpq.br/8284657916723590
O que é Usabilidade?

●   Pode ser definida como o estudo ou a
    aplicação de técnicas que proporcionem a
    facilidade de uso de um dado objeto
    (softwares);
●   Busca assegurar que qualquer pessoa
    consiga usar o objeto e que este funcione da
    forma esperada pela pessoa;




                                       Prof. Nécio Veras
Objetiva...

●   ...facilidade de uso;
●   ...facilidade de aprendizado;
●   ...facilidade de memorização de tarefas;
●   ...produtividade na execução de tarefas;
●   ...prevenção, visando a redução de erros;
●   ...satisfação do indivíduo.



                                          Prof. Nécio Veras
Usabilidade

●   Uma interface é o meio pelo qual a pessoa
    intervém, dialoga, modifica o objeto da interação
    (no caso, um software).
●   Se a interface é fácil de aprender, simples, direta e
    amigável, a pessoa estará inclinada a fazer uso da
    mesma.
●   Para um bom desenvolvimento deve-se observar:
    –   O cidadão;
    –   O contexto da utilização;
    –   O objetivo.

                                              Prof. Nécio Veras
Observação do cidadão

●   É necessário conhecer, entender e trabalhar
    com as pessoas que representam os atuais e
    potenciais utilizadores do produto.
●   Níveis de educação, familiaridade com o meio
    eletrônico e idade são fatores preponderantes;
●   Se o design agradar os usuários, eles
    voltarão!



                                       Prof. Nécio Veras
Observação do contexto

●   De onde o cidadão acessa, em que ambiente
    e em que condições.
●   As pessoas estão, geralmente, ocupadas e
    querem realizar rapidamente uma tarefa a qual
    se sentem obrigadas a fazer (ex: solicitação
    de algum benefício ou pagamento de qualquer
    espécie).




                                      Prof. Nécio Veras
Observação do objetivo

●   As pessoas utilizam os softwares com um objetivo.
●   O sucesso e a satisfação na realização desse objetivo
    estão diretamente relacionados com o tempo, o número
    de passos necessários, a possibilidade de prever o que
    deve ser feito e a necessidade de aprendizado.
●   O grande intuito da aplicação da usabilidade é:
    –   que cada pessoa que use o software encontre o que está
        buscando de maneira simples e
    –   que se sinta a vontade para usar sempre que quiser ou
        precisar.


                                                  Prof. Nécio Veras
IHC

●   A Interação Humano-Computador (HCI ou
    IHC) remete a clareza e facilidade de uso de
    interfaces eletrônicas, incluindo um programa
    de computador ou sítio.
●   A disciplina de IHC visa construir o
    conhecimento teórico necessário para
    embasar o desenho de interfaces que
    garantam uma boa usabilidade.



                                        Prof. Nécio Veras
A Usabilidade é interesse
                             de todos
●   É um processo colaborativo, interdisciplinar, assim é
    importante que todo membro da equipe envolvida com o
    sítio possua, pelo menos, a consciência da necessidade da
    usabilidade e conheça o básico da sua aplicação;
●   A preocupação com a facilidade de utilizar um software
    deve estar presente:
    –   Na concepção do sítio e de seus serviços;
    –   Na programação da aplicação;
    –   Na criação de funções;
    –   No desenho das páginas;
    –   Na estruturação das informações (arquitetura de informação);
    –   Na redação das informações.

                                                         Prof. Nécio Veras
Usabilidade na Web
●   A web não respeita limites de tempo e espaço. É um meio de
    inclusão social, não fazendo juízo de quem a usa;
●   Não há uma pessoa com vivência igual a outra.
●   Em resumo, estamos lidando com pessoas:
    –   Com níveis diferentes de conhecimento e familiaridade com
        computadores e internet;
    –   Com níveis diferentes de interesses nos serviços e informações;
    –   Com diferentes cargas de conhecimento e educação;
    –   Com idades diversas em momentos diversos da vida;
    –   Com características demográficas diversas.




                                                           Prof. Nécio Veras
Usabilidade na Web

●   A forma que as pessoas navegam um sítio é, quase
    sempre, bem diferente do que imaginamos.
    –   Apenas uma minoria de pessoas entrará no sítio da forma
        esperada.
●   As pessoas exploram as páginas aleatoriamente e
    clicam na primeira coisa que acham que deve ser o que
    estavam procurando. Se não for, utilizam o botão “voltar”
    do navegador e retornam a página anterior, fazendo isso
    quantas vezes acharem adequado em busca do que
    querem.



                                                     Prof. Nécio Veras
Usabilidade na Web
●   A partir daí podem utilizar a caixa de busca - muitas utilizam
    a caixa de busca direto – sem se preocupar em ler os
    menus;
    –   Não encontrando o que buscam, podem sair para nunca mais
        voltar, buscando a forma presencial do serviço, sobrecarregando
        os outros canais.
●   Em resumo as pessoas:
    –   Exploram páginas;
    –   Não buscam as melhores alternativas;
    –   Querem qualidade e credibilidade;
    –   Seguem a intuição;
    –   Querem ter o controle.

                                                          Prof. Nécio Veras
Usabilidade na Web

●    Pessoas não leem, elas exploram.
●    Note que as áreas vermelhas ocorrem no meio de
     sentenças, terminando abruptamente. Quase não há
     quase leitura nos parágrafos mais abaixo.
    Estudo realizado por Jacob Nielsen, acessivel em http://www.useit.com/alertbox/reading_pattern.html




                                                           '




                                                                                Prof. Nécio Veras
Usabilidade na Web

●   Por fim é importante lembrar de não devemos
    abusar da paciência do cidadão.
●   Quanto menos ações, campos a serem
    preenchidos, menos erros ele poderá cometer,
    menos tempo ele levará para concluir um
    serviço e teremos a certeza de que ele
    escolherá a web como seu canal de
    comunicação.



                                      Prof. Nécio Veras
Avaliação da Usabilidade
●
    Permitem a concepção de interfaces que atendam as expectativas e
    necessidades dos cidadãos além de garantir melhores decisões de projeto e
    evitar custos de correções tardias.
●
    Através das avaliações é possível responder aos seguintes
    questionamentos:
    –   As pessoas identificam o objetivo do sítio?
    –   Conseguem encontrar os principais serviços e informações?
    –   A navegação e a estrutura do sítio são claras e fazem sentido?
    –   Os serviços oferecidos são fáceis de serem realizados?
    –   Os formulários são fáceis de serem preenchidos?
    –   Os objetivos do órgão com relação ao sítio, estão sendo alcançados?
    –   Existe algum descompasso entre o que órgão pretende e
    –   o que os cidadãos esperam do sítio?
    –   Os cidadãos recorrem muito ao botão “voltar” do navegador?
    –   As pessoas se perdem facilmente no sitio?

                                                                         Prof. Nécio Veras
Avaliação da Usabilidade

●   Existem mais de 30 métodos de análise que
    podem ser implementados nos diversos
    estágios do projeto e do processo de
    desenvolvimento, podendo ser divididos em:
    –   Métodos de investigação
    –   Métodos de inspeção
    –   Teste com usuários.




                                      Prof. Nécio Veras
Método de Investigação

●   Utilizados nas etapas iniciais do projeto, são métodos
    contextuais, para identificar requisitos, obtendo
    informações através da indagação de pessoas e da
    observação destes usando o sistema.
●   Os métodos de investigação podem ser:
    –   observação de campo,
    –   grupos de discussão dirigida,
    –   entrevistas,
    –   gravação de uso e
    –   questionário.


                                                Prof. Nécio Veras
Método de Inspeção
●   São avaliações baseadas em um conjunto de diretrizes,
    usualmente derivadas de estudos em IHC e, ou psicologia
    cognitiva.
●   Os especialistas trabalham com uma lista de possíveis
    problemas e os avaliam.
●   Uma vez diagnosticados os problemas, são feitas
    recomendações para solucioná-los.
●   Alguns métodos de inspeção:
    –   Percurso Cognitivo (Cognitive walkthrought),
    –   Avaliação Heurística,
    –   Inspeção de padrões.



                                                       Prof. Nécio Veras
Testes com Usuários
●   Avaliam como as pessoas realmente usam ou gostam do site;
●   Orientados a tarefas;
●   Pede-se aos participantes para realizar uma tarefa e avalia-se
    como eles a realizaram
●   Usar somente amigos e parentes pode afetar a confiabilidade
    dos testes.
●   Existem boas fontes para a implementação de testes de
    usabilidade.
    –   O livro Não Me faça Pensar de Steve Krug e
    –   a monografia de Kátia Gomes Ferreira sobre testes de
        usabilidade.

                                                       Prof. Nécio Veras
Exemplo de uma
                       característica técnica
●   Na WEB, principalmente, A resolução
    influencia o design e layout.
    –   Alta resolução representa:
        ●   mais espaço disponível e elementos menores




                                                  Prof. Nécio Veras
Exemplo de uma
                   característica técnica
●   Faça o site funcionar para o seu público.
●   Não espere o usuário mudar a resolução ou o
    dispositivo.




                                          Prof. Nécio Veras
Acessibilidade
●   Tanto a acessibilidade quanto a usabilidade têm como foco de
    atenção o usuário (cidadão) e, muitas vezes, se sobrepõe
    como áreas de saber.
●   No entanto são áreas distintas.
●   Acessibilidade trata do acesso a locais, produtos, serviços ou
    informações efetivamente disponíveis ao maior número e
    variedade possível de pessoas independente de suas
    capacidades físico-motoras e perceptivas, culturais e sociais,
    já a usabilidade trata da facilidade de uso.
●   Um software pode ser acessível, mas difícil de ser utilizado
    ou;
    –   ser fácil de ser utilizado, mas inacessível a parte da população.

                                                          Prof. Nécio Veras
Acessibilidade

●
    Condição de acesso aos serviços de informação,
    documentação e comunicação, por parte de portador de
    necessidades especiais.
●
    Qualidade de um texto, material informativo, programas e
    aplicativos de informática, obra artística etc. de ser
    acessível a qualquer pessoa, mesmo para pessoas que
    tenham dificuldade ou impossibilidade de ver, locomover-
    se, ler ou interpretar textos, usar teclado ou mouse, falar
    ou compreender a língua na qual o material é expresso,
    poder usar mãos, olhos, ouvidos etc.
●
    Processos e técnicas usados para criar um site que pode
    ser usado por pessoas com alguma deficiência.
                                                  Prof. Nécio Veras
Problema de
acessibilidade




            Prof. Nécio Veras
Leitor de tela

●
    Software usado por pessoas com algum tipo
    de deficiência visual para a leitura do texto de
    um site.
●
    Vamos assistir ao vídeo:
    –   Acessibilidade Web: Custo ou Benefício:
        http://acessodigital.net/video-html5/video-
        acessibilidade-br.html




                                               Prof. Nécio Veras
Como criar descrição de
         imagens usando texto na Web?

•Usar o atributo alt do elemento img
 para prover descrição em texto para
 uma imagem que será lida pelo leitor
 de tela.
•O atributo longdesc provê link para
 uma página que contém descrição
 textual de uma imagem que é muito
 grande para o atributo alt.

                             Prof. Nécio Veras
Atenção especial com a
                 tecla tab
• Pessoas com problemas motores nas
  mãos frequentemente usam a tecla TAB
  ao invés do mouse para navegar entre
  os links de uma página web.

• O atributo tabindex permite definir a
  posição de um link específico em uma
  sequência de tabulação.


                                Prof. Nécio Veras
Referências

Padrões Web em Governo Eletrônico : Cartilha
de Usabilidade / Ministério do Planejamento,
Orçamento e Gestão, Secretaria de Logística e
Tecnologia da Informação - Brasília : MP, SLTI,
2010.




                                      Prof. Nécio Veras

Mais conteúdo relacionado

Mais procurados

Ergonomia & Usabilidade
Ergonomia & UsabilidadeErgonomia & Usabilidade
Ergonomia & UsabilidadeLuiz China
 
Aula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoAula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoFabio Moura Pereira
 
Perfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCPerfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCRos Galabo, PhD
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores Monica Mesquita
 
Usabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasUsabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasAlan Vasconcelos
 
Palestra - Heurísticas e Usabilidade
Palestra - Heurísticas e UsabilidadePalestra - Heurísticas e Usabilidade
Palestra - Heurísticas e UsabilidadeLuiz Agner
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informaçãoCristiane Mendes
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosAlan Vasconcelos
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Wellington Oliveira
 
Usabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenUsabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenTersis Zonato
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoAlan Vasconcelos
 

Mais procurados (20)

Interação Humano-Computador (IHC)
Interação Humano-Computador (IHC)Interação Humano-Computador (IHC)
Interação Humano-Computador (IHC)
 
Usabilidade - Metas, Principios e Heuristicas
Usabilidade -  Metas, Principios e HeuristicasUsabilidade -  Metas, Principios e Heuristicas
Usabilidade - Metas, Principios e Heuristicas
 
Ergonomia & Usabilidade
Ergonomia & UsabilidadeErgonomia & Usabilidade
Ergonomia & Usabilidade
 
Interface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHCInterface Homem Computador - Aula02 - Principios de design em IHC
Interface Homem Computador - Aula02 - Principios de design em IHC
 
Aula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoAula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de Interação
 
Perfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCPerfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHC
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
Usabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasUsabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicas
 
Palestra - Heurísticas e Usabilidade
Palestra - Heurísticas e UsabilidadePalestra - Heurísticas e Usabilidade
Palestra - Heurísticas e Usabilidade
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
 
Design Centrado no Ser Humano
Design Centrado no Ser HumanoDesign Centrado no Ser Humano
Design Centrado no Ser Humano
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Usabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenUsabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de Nielsen
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 Introdução
 
Interface Homem Computador - Aula01- Introdução a IHC
Interface Homem Computador - Aula01- Introdução a IHCInterface Homem Computador - Aula01- Introdução a IHC
Interface Homem Computador - Aula01- Introdução a IHC
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 

Destaque

Técnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidadeTécnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidadeRobson Santos
 
Arquitetura web, o que nao fazer!
Arquitetura web, o que nao fazer!Arquitetura web, o que nao fazer!
Arquitetura web, o que nao fazer!Khwesten Heiner
 
Conteúdos digitais multimídia: o foco na usabilidade e na acessibilidade
Conteúdos digitais multimídia: o foco na usabilidade e na acessibilidadeConteúdos digitais multimídia: o foco na usabilidade e na acessibilidade
Conteúdos digitais multimídia: o foco na usabilidade e na acessibilidadeMárcia Silva Corrêa
 
Usabilidade e Acessibilidade
Usabilidade e AcessibilidadeUsabilidade e Acessibilidade
Usabilidade e AcessibilidadeKetlin Stringhini
 
Palestra - Testes de Usabilidade
Palestra - Testes de UsabilidadePalestra - Testes de Usabilidade
Palestra - Testes de UsabilidadeLuiz Agner
 
Usabilidade e Navegabilidade
Usabilidade e NavegabilidadeUsabilidade e Navegabilidade
Usabilidade e NavegabilidadeDaniel Tavares
 
Intertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propagandaIntertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propagandaTiago Santana
 
Html e acessibilidade
Html e acessibilidadeHtml e acessibilidade
Html e acessibilidadeRenan Alfarth
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Marcello Cardoso
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...Claudio Diniz - Designer Gráfico
 
Isc aula 5 - estrutura e organização da informação
Isc   aula 5 - estrutura e organização da informaçãoIsc   aula 5 - estrutura e organização da informação
Isc aula 5 - estrutura e organização da informaçãoFábio Andrade
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareFlavia Negrao
 

Destaque (20)

Técnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidadeTécnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidade
 
Arquitetura web, o que nao fazer!
Arquitetura web, o que nao fazer!Arquitetura web, o que nao fazer!
Arquitetura web, o que nao fazer!
 
Conteúdos digitais multimídia: o foco na usabilidade e na acessibilidade
Conteúdos digitais multimídia: o foco na usabilidade e na acessibilidadeConteúdos digitais multimídia: o foco na usabilidade e na acessibilidade
Conteúdos digitais multimídia: o foco na usabilidade e na acessibilidade
 
Usabilidade e Acessibilidade
Usabilidade e AcessibilidadeUsabilidade e Acessibilidade
Usabilidade e Acessibilidade
 
Acessibilidade e Tecnologias Assistivas
Acessibilidade e Tecnologias AssistivasAcessibilidade e Tecnologias Assistivas
Acessibilidade e Tecnologias Assistivas
 
Automatização do apontamento de produção
Automatização do apontamento de produçãoAutomatização do apontamento de produção
Automatização do apontamento de produção
 
Palestra - Testes de Usabilidade
Palestra - Testes de UsabilidadePalestra - Testes de Usabilidade
Palestra - Testes de Usabilidade
 
Storyselling
StorysellingStoryselling
Storyselling
 
Usabilidade e Navegabilidade
Usabilidade e NavegabilidadeUsabilidade e Navegabilidade
Usabilidade e Navegabilidade
 
Intertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propagandaIntertextualidade e Ready Made na propaganda
Intertextualidade e Ready Made na propaganda
 
Versionamento com git
Versionamento com gitVersionamento com git
Versionamento com git
 
Design Gráfico - Cores
Design Gráfico - CoresDesign Gráfico - Cores
Design Gráfico - Cores
 
Html e acessibilidade
Html e acessibilidadeHtml e acessibilidade
Html e acessibilidade
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
 
Teste de software
Teste de softwareTeste de software
Teste de software
 
Noções de Design Gráfico
Noções de Design GráficoNoções de Design Gráfico
Noções de Design Gráfico
 
Isc aula 5 - estrutura e organização da informação
Isc   aula 5 - estrutura e organização da informaçãoIsc   aula 5 - estrutura e organização da informação
Isc aula 5 - estrutura e organização da informação
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
 
Teoria das cores
Teoria das coresTeoria das cores
Teoria das cores
 

Semelhante a Design Gráfico, Usabilidade e Acessibilidade

Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshareguest5ccda
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGELuiz Agner
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfJulioCesar371362
 
Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuárioDesign de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuárioLuiz Henrique Pinho de Sá
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no UsuárioDavi Busanello
 
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Atech S.A. | Embraer Group
 
Avaliação de Usabilidade
Avaliação de UsabilidadeAvaliação de Usabilidade
Avaliação de UsabilidadeMarcos Souza
 
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Rafael Burity
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webDaniel Brandão
 
Palestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaPalestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaLuiz Agner
 
ErgoDesign e Arquitetura da Informação - Parte A
ErgoDesign e Arquitetura da  Informação - Parte AErgoDesign e Arquitetura da  Informação - Parte A
ErgoDesign e Arquitetura da Informação - Parte AFabiano Damiati
 
Campus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidadeCampus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidadeLeandro Biazon
 
My Report - Usability Tests
My Report - Usability TestsMy Report - Usability Tests
My Report - Usability TestsMichel Alves
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design • Suzi Sarmento
 
Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoWellington Marion
 
Testes e avaliação de protótipos
Testes e avaliação de protótiposTestes e avaliação de protótipos
Testes e avaliação de protótiposRobson Santos
 

Semelhante a Design Gráfico, Usabilidade e Acessibilidade (20)

Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
 
Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuárioDesign de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
 
Avaliação de Usabilidade
Avaliação de UsabilidadeAvaliação de Usabilidade
Avaliação de Usabilidade
 
User eXperience
User eXperienceUser eXperience
User eXperience
 
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
 
5 - A pesquisa.ppt
5 - A pesquisa.ppt5 - A pesquisa.ppt
5 - A pesquisa.ppt
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na web
 
Palestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaPalestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, Brasília
 
ErgoDesign e Arquitetura da Informação - Parte A
ErgoDesign e Arquitetura da  Informação - Parte AErgoDesign e Arquitetura da  Informação - Parte A
ErgoDesign e Arquitetura da Informação - Parte A
 
Campus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidadeCampus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidade
 
My Report - Usability Tests
My Report - Usability TestsMy Report - Usability Tests
My Report - Usability Tests
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
 
Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
 
Testes e avaliação de protótipos
Testes e avaliação de protótiposTestes e avaliação de protótipos
Testes e avaliação de protótipos
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Testes de Usabilidade
Testes de UsabilidadeTestes de Usabilidade
Testes de Usabilidade
 

Mais de Nécio de Lima Veras

Introdução à analise e complexidade de algoritmos
Introdução à analise e complexidade de algoritmosIntrodução à analise e complexidade de algoritmos
Introdução à analise e complexidade de algoritmosNécio de Lima Veras
 
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...Nécio de Lima Veras
 
Introdução à Engenharia de Software Orientada a Agentes com JaCaMo
Introdução à Engenharia de Software Orientada a Agentes com JaCaMoIntrodução à Engenharia de Software Orientada a Agentes com JaCaMo
Introdução à Engenharia de Software Orientada a Agentes com JaCaMoNécio de Lima Veras
 
Jason: Componentes personalizados
Jason: Componentes personalizados Jason: Componentes personalizados
Jason: Componentes personalizados Nécio de Lima Veras
 
Ambientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentesAmbientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentesNécio de Lima Veras
 
Arquiteturas concretas de agentes inteligentes - bdi agents
Arquiteturas concretas de agentes inteligentes - bdi agentsArquiteturas concretas de agentes inteligentes - bdi agents
Arquiteturas concretas de agentes inteligentes - bdi agentsNécio de Lima Veras
 
Especificações iniciais de agentes inteligentes
Especificações iniciais de agentes inteligentesEspecificações iniciais de agentes inteligentes
Especificações iniciais de agentes inteligentesNécio de Lima Veras
 
Processos iniciais do mapeamento OR
Processos iniciais do mapeamento ORProcessos iniciais do mapeamento OR
Processos iniciais do mapeamento ORNécio de Lima Veras
 
Introdução aos Sistemas operacionais
Introdução aos Sistemas operacionaisIntrodução aos Sistemas operacionais
Introdução aos Sistemas operacionaisNécio de Lima Veras
 
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...Nécio de Lima Veras
 

Mais de Nécio de Lima Veras (20)

Introdução ao JavaFX
Introdução ao JavaFXIntrodução ao JavaFX
Introdução ao JavaFX
 
Introdução à analise e complexidade de algoritmos
Introdução à analise e complexidade de algoritmosIntrodução à analise e complexidade de algoritmos
Introdução à analise e complexidade de algoritmos
 
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
Uma Abordagem Baseada em Agentes para Planejamento e Monitoramento de Serviço...
 
Introdução à Engenharia de Software Orientada a Agentes com JaCaMo
Introdução à Engenharia de Software Orientada a Agentes com JaCaMoIntrodução à Engenharia de Software Orientada a Agentes com JaCaMo
Introdução à Engenharia de Software Orientada a Agentes com JaCaMo
 
Jason: Componentes personalizados
Jason: Componentes personalizados Jason: Componentes personalizados
Jason: Componentes personalizados
 
Agentes inteligentes com jason
Agentes inteligentes com jasonAgentes inteligentes com jason
Agentes inteligentes com jason
 
Ambientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentesAmbientes em Sistemas Multi-agentes
Ambientes em Sistemas Multi-agentes
 
Arquiteturas concretas de agentes inteligentes - bdi agents
Arquiteturas concretas de agentes inteligentes - bdi agentsArquiteturas concretas de agentes inteligentes - bdi agents
Arquiteturas concretas de agentes inteligentes - bdi agents
 
Revisão de matemática
Revisão de matemáticaRevisão de matemática
Revisão de matemática
 
Especificações iniciais de agentes inteligentes
Especificações iniciais de agentes inteligentesEspecificações iniciais de agentes inteligentes
Especificações iniciais de agentes inteligentes
 
Notas sobre agentes inteligentes
Notas sobre agentes inteligentesNotas sobre agentes inteligentes
Notas sobre agentes inteligentes
 
Anotações do mapeamento OR
Anotações do mapeamento ORAnotações do mapeamento OR
Anotações do mapeamento OR
 
Hibernate-consultas
Hibernate-consultasHibernate-consultas
Hibernate-consultas
 
Mapeamento de herança OR
Mapeamento de herança ORMapeamento de herança OR
Mapeamento de herança OR
 
Relacionamentos do mapeamento OR
Relacionamentos do mapeamento ORRelacionamentos do mapeamento OR
Relacionamentos do mapeamento OR
 
Processos iniciais do mapeamento OR
Processos iniciais do mapeamento ORProcessos iniciais do mapeamento OR
Processos iniciais do mapeamento OR
 
Java swing
Java swingJava swing
Java swing
 
Introdução à linguagem UML
Introdução à linguagem UMLIntrodução à linguagem UML
Introdução à linguagem UML
 
Introdução aos Sistemas operacionais
Introdução aos Sistemas operacionaisIntrodução aos Sistemas operacionais
Introdução aos Sistemas operacionais
 
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
Organizando um Repositório de Objetos de Aprendizagem para dispositivos móvei...
 

Design Gráfico, Usabilidade e Acessibilidade

  • 1. Noções de Design Gráfico Unidade III – Usabilidade e Acessibilidade Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  • 2. Objetivo Visualizar os conceitos sobre usabilidade e acessibilidade Página da disciplina na Web Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  • 3. O que é Usabilidade? ● Pode ser definida como o estudo ou a aplicação de técnicas que proporcionem a facilidade de uso de um dado objeto (softwares); ● Busca assegurar que qualquer pessoa consiga usar o objeto e que este funcione da forma esperada pela pessoa; Prof. Nécio Veras
  • 4. Objetiva... ● ...facilidade de uso; ● ...facilidade de aprendizado; ● ...facilidade de memorização de tarefas; ● ...produtividade na execução de tarefas; ● ...prevenção, visando a redução de erros; ● ...satisfação do indivíduo. Prof. Nécio Veras
  • 5. Usabilidade ● Uma interface é o meio pelo qual a pessoa intervém, dialoga, modifica o objeto da interação (no caso, um software). ● Se a interface é fácil de aprender, simples, direta e amigável, a pessoa estará inclinada a fazer uso da mesma. ● Para um bom desenvolvimento deve-se observar: – O cidadão; – O contexto da utilização; – O objetivo. Prof. Nécio Veras
  • 6. Observação do cidadão ● É necessário conhecer, entender e trabalhar com as pessoas que representam os atuais e potenciais utilizadores do produto. ● Níveis de educação, familiaridade com o meio eletrônico e idade são fatores preponderantes; ● Se o design agradar os usuários, eles voltarão! Prof. Nécio Veras
  • 7. Observação do contexto ● De onde o cidadão acessa, em que ambiente e em que condições. ● As pessoas estão, geralmente, ocupadas e querem realizar rapidamente uma tarefa a qual se sentem obrigadas a fazer (ex: solicitação de algum benefício ou pagamento de qualquer espécie). Prof. Nécio Veras
  • 8. Observação do objetivo ● As pessoas utilizam os softwares com um objetivo. ● O sucesso e a satisfação na realização desse objetivo estão diretamente relacionados com o tempo, o número de passos necessários, a possibilidade de prever o que deve ser feito e a necessidade de aprendizado. ● O grande intuito da aplicação da usabilidade é: – que cada pessoa que use o software encontre o que está buscando de maneira simples e – que se sinta a vontade para usar sempre que quiser ou precisar. Prof. Nécio Veras
  • 9. IHC ● A Interação Humano-Computador (HCI ou IHC) remete a clareza e facilidade de uso de interfaces eletrônicas, incluindo um programa de computador ou sítio. ● A disciplina de IHC visa construir o conhecimento teórico necessário para embasar o desenho de interfaces que garantam uma boa usabilidade. Prof. Nécio Veras
  • 10. A Usabilidade é interesse de todos ● É um processo colaborativo, interdisciplinar, assim é importante que todo membro da equipe envolvida com o sítio possua, pelo menos, a consciência da necessidade da usabilidade e conheça o básico da sua aplicação; ● A preocupação com a facilidade de utilizar um software deve estar presente: – Na concepção do sítio e de seus serviços; – Na programação da aplicação; – Na criação de funções; – No desenho das páginas; – Na estruturação das informações (arquitetura de informação); – Na redação das informações. Prof. Nécio Veras
  • 11. Usabilidade na Web ● A web não respeita limites de tempo e espaço. É um meio de inclusão social, não fazendo juízo de quem a usa; ● Não há uma pessoa com vivência igual a outra. ● Em resumo, estamos lidando com pessoas: – Com níveis diferentes de conhecimento e familiaridade com computadores e internet; – Com níveis diferentes de interesses nos serviços e informações; – Com diferentes cargas de conhecimento e educação; – Com idades diversas em momentos diversos da vida; – Com características demográficas diversas. Prof. Nécio Veras
  • 12. Usabilidade na Web ● A forma que as pessoas navegam um sítio é, quase sempre, bem diferente do que imaginamos. – Apenas uma minoria de pessoas entrará no sítio da forma esperada. ● As pessoas exploram as páginas aleatoriamente e clicam na primeira coisa que acham que deve ser o que estavam procurando. Se não for, utilizam o botão “voltar” do navegador e retornam a página anterior, fazendo isso quantas vezes acharem adequado em busca do que querem. Prof. Nécio Veras
  • 13. Usabilidade na Web ● A partir daí podem utilizar a caixa de busca - muitas utilizam a caixa de busca direto – sem se preocupar em ler os menus; – Não encontrando o que buscam, podem sair para nunca mais voltar, buscando a forma presencial do serviço, sobrecarregando os outros canais. ● Em resumo as pessoas: – Exploram páginas; – Não buscam as melhores alternativas; – Querem qualidade e credibilidade; – Seguem a intuição; – Querem ter o controle. Prof. Nécio Veras
  • 14. Usabilidade na Web ● Pessoas não leem, elas exploram. ● Note que as áreas vermelhas ocorrem no meio de sentenças, terminando abruptamente. Quase não há quase leitura nos parágrafos mais abaixo. Estudo realizado por Jacob Nielsen, acessivel em http://www.useit.com/alertbox/reading_pattern.html ' Prof. Nécio Veras
  • 15. Usabilidade na Web ● Por fim é importante lembrar de não devemos abusar da paciência do cidadão. ● Quanto menos ações, campos a serem preenchidos, menos erros ele poderá cometer, menos tempo ele levará para concluir um serviço e teremos a certeza de que ele escolherá a web como seu canal de comunicação. Prof. Nécio Veras
  • 16. Avaliação da Usabilidade ● Permitem a concepção de interfaces que atendam as expectativas e necessidades dos cidadãos além de garantir melhores decisões de projeto e evitar custos de correções tardias. ● Através das avaliações é possível responder aos seguintes questionamentos: – As pessoas identificam o objetivo do sítio? – Conseguem encontrar os principais serviços e informações? – A navegação e a estrutura do sítio são claras e fazem sentido? – Os serviços oferecidos são fáceis de serem realizados? – Os formulários são fáceis de serem preenchidos? – Os objetivos do órgão com relação ao sítio, estão sendo alcançados? – Existe algum descompasso entre o que órgão pretende e – o que os cidadãos esperam do sítio? – Os cidadãos recorrem muito ao botão “voltar” do navegador? – As pessoas se perdem facilmente no sitio? Prof. Nécio Veras
  • 17. Avaliação da Usabilidade ● Existem mais de 30 métodos de análise que podem ser implementados nos diversos estágios do projeto e do processo de desenvolvimento, podendo ser divididos em: – Métodos de investigação – Métodos de inspeção – Teste com usuários. Prof. Nécio Veras
  • 18. Método de Investigação ● Utilizados nas etapas iniciais do projeto, são métodos contextuais, para identificar requisitos, obtendo informações através da indagação de pessoas e da observação destes usando o sistema. ● Os métodos de investigação podem ser: – observação de campo, – grupos de discussão dirigida, – entrevistas, – gravação de uso e – questionário. Prof. Nécio Veras
  • 19. Método de Inspeção ● São avaliações baseadas em um conjunto de diretrizes, usualmente derivadas de estudos em IHC e, ou psicologia cognitiva. ● Os especialistas trabalham com uma lista de possíveis problemas e os avaliam. ● Uma vez diagnosticados os problemas, são feitas recomendações para solucioná-los. ● Alguns métodos de inspeção: – Percurso Cognitivo (Cognitive walkthrought), – Avaliação Heurística, – Inspeção de padrões. Prof. Nécio Veras
  • 20. Testes com Usuários ● Avaliam como as pessoas realmente usam ou gostam do site; ● Orientados a tarefas; ● Pede-se aos participantes para realizar uma tarefa e avalia-se como eles a realizaram ● Usar somente amigos e parentes pode afetar a confiabilidade dos testes. ● Existem boas fontes para a implementação de testes de usabilidade. – O livro Não Me faça Pensar de Steve Krug e – a monografia de Kátia Gomes Ferreira sobre testes de usabilidade. Prof. Nécio Veras
  • 21. Exemplo de uma característica técnica ● Na WEB, principalmente, A resolução influencia o design e layout. – Alta resolução representa: ● mais espaço disponível e elementos menores Prof. Nécio Veras
  • 22. Exemplo de uma característica técnica ● Faça o site funcionar para o seu público. ● Não espere o usuário mudar a resolução ou o dispositivo. Prof. Nécio Veras
  • 23. Acessibilidade ● Tanto a acessibilidade quanto a usabilidade têm como foco de atenção o usuário (cidadão) e, muitas vezes, se sobrepõe como áreas de saber. ● No entanto são áreas distintas. ● Acessibilidade trata do acesso a locais, produtos, serviços ou informações efetivamente disponíveis ao maior número e variedade possível de pessoas independente de suas capacidades físico-motoras e perceptivas, culturais e sociais, já a usabilidade trata da facilidade de uso. ● Um software pode ser acessível, mas difícil de ser utilizado ou; – ser fácil de ser utilizado, mas inacessível a parte da população. Prof. Nécio Veras
  • 24. Acessibilidade ● Condição de acesso aos serviços de informação, documentação e comunicação, por parte de portador de necessidades especiais. ● Qualidade de um texto, material informativo, programas e aplicativos de informática, obra artística etc. de ser acessível a qualquer pessoa, mesmo para pessoas que tenham dificuldade ou impossibilidade de ver, locomover- se, ler ou interpretar textos, usar teclado ou mouse, falar ou compreender a língua na qual o material é expresso, poder usar mãos, olhos, ouvidos etc. ● Processos e técnicas usados para criar um site que pode ser usado por pessoas com alguma deficiência. Prof. Nécio Veras
  • 25. Problema de acessibilidade Prof. Nécio Veras
  • 26. Leitor de tela ● Software usado por pessoas com algum tipo de deficiência visual para a leitura do texto de um site. ● Vamos assistir ao vídeo: – Acessibilidade Web: Custo ou Benefício: http://acessodigital.net/video-html5/video- acessibilidade-br.html Prof. Nécio Veras
  • 27. Como criar descrição de imagens usando texto na Web? •Usar o atributo alt do elemento img para prover descrição em texto para uma imagem que será lida pelo leitor de tela. •O atributo longdesc provê link para uma página que contém descrição textual de uma imagem que é muito grande para o atributo alt. Prof. Nécio Veras
  • 28. Atenção especial com a tecla tab • Pessoas com problemas motores nas mãos frequentemente usam a tecla TAB ao invés do mouse para navegar entre os links de uma página web. • O atributo tabindex permite definir a posição de um link específico em uma sequência de tabulação. Prof. Nécio Veras
  • 29. Referências Padrões Web em Governo Eletrônico : Cartilha de Usabilidade / Ministério do Planejamento, Orçamento e Gestão, Secretaria de Logística e Tecnologia da Informação - Brasília : MP, SLTI, 2010. Prof. Nécio Veras