SlideShare uma empresa Scribd logo
1 de 37
Baixar para ler offline
WEBDESIGN
- UNIDADE II -
ESTRUTURAÇÃO PARA A CRIAÇÃO DE
SITE
Usabilidade
Conceito - Usabilidade
2


       É sinônimo de facilidade de uso.
       Se o produto é fácil de usar, o usuário tem maior
        produtividade, ou seja, aprende mais rápido a
        usar, memoriza as operações e comete menos erros.
Conceito - Usabilidade
3


       “Usabilidade está diretamente ligada ao diálogo na
        interface. É a capacidade do software em permitir
        que o usuário alcance suas metas de interação com o
        sistema”-Scapin(1993)
Por que usabilidade é importante?
4


       Se um site for difícil de usar, o usuário sai.
       Se o site não for claro o suficiente para mostrar o
        que a empresa oferece e o que é possível fazer, o
        usuário sai e procura o site do concorrente.
       Se o usuário se perde, ele sai do site.
       Se demorar para carregar, ele sai definitivamente
Site Confuso
5
Site não está claro – TWITTER (2006)
6
Plataforma TWITTER (2012)
7
Demora no Carregamento
8
Atributos da USABILIDADE
9


       FACILIDADE DE USO
        Após ter aprendido a interagir com o sistema, o
        usuário atinge altos níveis de produtividade na
        realização de suas tarefas.

       FACILIDADE DE APRENDIZAGEM
        O usuário consegue rapidamente explorar o
        sistema e realizar suas tarefas

       FACILIDADE DE MEMORIZAÇÃO DE TAREFAS
        Os usuários conseguem memorizar as suas tarefas
        sem sobrecarregar suas interações
Atributos da USABILIDADE
10


        PREVENÇÃO, VISANDO A REDUÇÃO DE ERROS
         O usuário realiza suas tarefas sem maiores
         transtornos e é capaz de recuperar erros, caso
         ocorram.

        SATISFAÇÃO DO INDIVÍDUO
         Conforto, segurança e felicidade subjetiva
Exemplo em SOFTWARE
11
     - Atributos de USABILIDADE
Aplicações de Usabilidade
12


        Percebe-se a sua ausência quando encontramos
         dificuldades para realizar uma tarefa devido à
         quantidade de itens a serem decodificados.
Aplicações de Usabilidade
13
Aplicações de Usabilidade
14
Aplicações de Usabilidade
15
Elementos de Navegabilidade com
16
     Usabilidade
     Elemento de Interface          Posicionamento
     Marca da empresa               Canto superior esquerdo
     Busca                          Parte superior
     Navegação Global               Parte superior com links horizontais
     Navegação Local                Coluna da esquerda
     Breadcrumbs                    Parte superior, abaixo da marca da
                                    empresa
     Conteúdo global e contextual   Área central
     Navegação do rodapé            Parte inferior
Elementos de Navegabilidade com
17
     Usabilidade
Elementos de Navegabilidade com
18
     Usabilidade
Elementos de Navegabilidade com
19
     Usabilidade
Breadcrumbs (navegação estrutural)
20


        Quando após uma pesquisa realizada, aparece
         uma sequência de links apresentando uma
         navegação estrutural complementar.
5 ERROS QUE DEVE SER EVITADOS
21


     1. Conteúdo importante em janelas pop-up
5 ERROS QUE DEVE SER EVITADOS
22


     2. Animações de Abertura
5 ERROS QUE DEVE SER EVITADOS
23


     3. Música no site
5 ERROS QUE DEVE SER EVITADOS
24


     4. Esta página está em construção
5 ERROS QUE DEVE SER EVITADOS
25


     5. Esta página está em construção
7 regras básicas de usabilidade
26


     1.   Clareza na arquitetura da informação
     2.   Facilidade de navegação
     3.   Simplicidade
     4.   Relevância de conteúdo
     5.   Manter a consistência
     6.   Tempo suportável
     7.   Foco nos usuários
7 regras básicas de usabilidade
27


     1. Clareza na arquitetura da informação
        - essencial que o usuário consiga discernir o que é
        prioritário e o que é secundário no site

        - bom arranjo da informação

        - usuários ao terem dificuldades em encontrar o
        que procuram devem ter uma forma de ajuda.
        Ex: mapa do site
7 regras básicas de usabilidade
28


     2. Facilidade de navegação
     - A informação deve ser acessada com no máximo 3
     cliques.
7 regras básicas de usabilidade
29


     3. Simplicidade
     - Quem navega quer encontrar o que deseja o mais
       rápido possível
     - Efeitos especiais devem ser evitados para que não
       confunda o usuário ao buscar uma informação
7 regras básicas de usabilidade
30


     4. Relevância do conteúdo
     - O texto deve ser conciso e objetivo
     - A informação deve adaptada dentro da mídia
       utilizada.
7 regras básicas de usabilidade
31


     5. Manter a consistência
     - Quando a operação do site acontece sempre da
       mesma forma, o usuário não fica à mercê de
       surpresas de navegabilidade.
     - Um site deve ser gerenciado como um projeto único
       de interface com o usuário.
7 regras básicas de usabilidade
32


     6. Tempo suportável
     - Tempo de carregamento das páginas deve ser
       curto
     - Uma pesquisa realizada por Jakob Nielsen prova
       que 10 segundos é o tempo máximo antes que as
       pessoas percam o interesse pelo site.
7 regras básicas de usabilidade
33


     7. Foco nos usuários
     - Pense sempre no usuário antes dele precisar de
       você.
     - Pense sempre nos instrumentos de pesquisa, nas
       interfaces dos sistemas de gerenciamento e na
       relação direta do usuário com a informação
Testes de usabilidade
34


     Eficiência
     - Quanto tempo demora para realizar tarefas
       básicas? (ex: criar nova conta, concluir um pedido)

     Acuracidade
     - Quantos erros as pessoas cometeram?
     (os erros interromperam a navegação ou os usuários
     conseguiram chegar ao seu objetivo?)
Testes de usabilidade
35


     Recall
     - Quanto a pessoa lembra após a interação ou
       períodos de inatividade?

     Resposta emocional
     - Como as pessoas se sentem sobre as tarefas
     concluídas? A pessoa está confiante ou confusa? O
     usuário recomendaria este site para um amigo?
REFERÊNCIAS
36

        www.useit.com
        www.usabilidoido.com.br
        KRUG, Steve. Não me faça pensar. Uma abordagem de Bom Senso à
         Usabilidade na Web. São Paulo, SP. Editora Alta Books, 2008.
        NIELSEN, Jakob. Projetando Websites. São Paulo, SP. Editora Campus,
         2010.
OBRIGADO!
37


        PROF. SERGIO XAVIER

         E-mail:
         sergiosx@gmail.com

         Blog:
         www.profsergioxavier.wordpress.com

Mais conteúdo relacionado

Destaque (12)

Aula05 prod grafica
Aula05 prod graficaAula05 prod grafica
Aula05 prod grafica
 
Aula01 - Estudo de Novas Mídias Digitais
Aula01 - Estudo de Novas Mídias DigitaisAula01 - Estudo de Novas Mídias Digitais
Aula01 - Estudo de Novas Mídias Digitais
 
Aula01 prod grafica
Aula01 prod graficaAula01 prod grafica
Aula01 prod grafica
 
Aula13 editoracao eletronica
Aula13 editoracao eletronicaAula13 editoracao eletronica
Aula13 editoracao eletronica
 
Aula10 editoracao eletronica
Aula10 editoracao eletronicaAula10 editoracao eletronica
Aula10 editoracao eletronica
 
Manual de identidade visual choco one utilizado como trabalho de faculdade
Manual de identidade visual choco one utilizado como trabalho de faculdadeManual de identidade visual choco one utilizado como trabalho de faculdade
Manual de identidade visual choco one utilizado como trabalho de faculdade
 
Aula07 midia digital
Aula07 midia digitalAula07 midia digital
Aula07 midia digital
 
Aula04 prod grafica
Aula04 prod graficaAula04 prod grafica
Aula04 prod grafica
 
Manual de Identidade Visual - Agência Unique
Manual de Identidade Visual - Agência UniqueManual de Identidade Visual - Agência Unique
Manual de Identidade Visual - Agência Unique
 
Manual de identidade visual Atelier Comunicação
Manual de identidade visual Atelier ComunicaçãoManual de identidade visual Atelier Comunicação
Manual de identidade visual Atelier Comunicação
 
Aula01 editoracao eletronica
Aula01 editoracao eletronicaAula01 editoracao eletronica
Aula01 editoracao eletronica
 
Coruja Design - Manual de Identidade Visual
Coruja Design - Manual de Identidade VisualCoruja Design - Manual de Identidade Visual
Coruja Design - Manual de Identidade Visual
 

Semelhante a Aula06 webdesign

Usabilidade Web Alberane
Usabilidade Web AlberaneUsabilidade Web Alberane
Usabilidade Web Alberaneguest2da055
 
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
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2aiadufmg
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...Rio Info
 
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
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototypeeudisnet
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2aiadufmg
 
Curso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem MáquinaCurso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem Máquinakenethyf
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosawudrs
 
Design para a internet - projetando a experêincia perfeita 1º bim
Design para a internet - projetando a experêincia perfeita 1º bimDesign para a internet - projetando a experêincia perfeita 1º bim
Design para a internet - projetando a experêincia perfeita 1º bimReuel Lopes
 
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceEvento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceImpacta Eventos
 
Analise heuristica
Analise heuristicaAnalise heuristica
Analise heuristicaArianna Ary
 
Aula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de InformaçãoAula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de Informaçãopedrinabrasil071
 
Design para a Internet: projetando a experiência perfeita
Design para a Internet: projetando a experiência perfeitaDesign para a Internet: projetando a experiência perfeita
Design para a Internet: projetando a experiência perfeitafmemoria
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e UsabilidadeClaudio Toldo
 

Semelhante a Aula06 webdesign (20)

Usabilidade Web Alberane
Usabilidade Web AlberaneUsabilidade Web Alberane
Usabilidade Web Alberane
 
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
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
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
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototype
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
 
Web Design > Usabilidade
Web Design > UsabilidadeWeb Design > Usabilidade
Web Design > Usabilidade
 
Curso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem MáquinaCurso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem Máquina
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
Design para a internet - projetando a experêincia perfeita 1º bim
Design para a internet - projetando a experêincia perfeita 1º bimDesign para a internet - projetando a experêincia perfeita 1º bim
Design para a internet - projetando a experêincia perfeita 1º bim
 
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceEvento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
 
Analise heuristica
Analise heuristicaAnalise heuristica
Analise heuristica
 
Joomla e acessibilidade
Joomla e acessibilidadeJoomla e acessibilidade
Joomla e acessibilidade
 
Aula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de InformaçãoAula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de Informação
 
Design para a Internet: projetando a experiência perfeita
Design para a Internet: projetando a experiência perfeitaDesign para a Internet: projetando a experiência perfeita
Design para a Internet: projetando a experiência perfeita
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 

Mais de IBMR Laureate International Universities

A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresasA visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresasIBMR Laureate International Universities
 

Mais de IBMR Laureate International Universities (18)

Palestra como_criar_uma_logo_no_illustrator
 Palestra como_criar_uma_logo_no_illustrator Palestra como_criar_uma_logo_no_illustrator
Palestra como_criar_uma_logo_no_illustrator
 
A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresasA visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
 
Aula03 editoracao eletronica
Aula03 editoracao eletronicaAula03 editoracao eletronica
Aula03 editoracao eletronica
 
Aula05 midia digital
Aula05 midia digitalAula05 midia digital
Aula05 midia digital
 
Aula04 midia digital
Aula04 midia digitalAula04 midia digital
Aula04 midia digital
 
Aula02 editoracao eletronica
Aula02 editoracao eletronicaAula02 editoracao eletronica
Aula02 editoracao eletronica
 
Aula03 midia digital
Aula03 midia digitalAula03 midia digital
Aula03 midia digital
 
Aula02 midia digital
Aula02 midia digitalAula02 midia digital
Aula02 midia digital
 
Aula01 midia digital
Aula01 midia digitalAula01 midia digital
Aula01 midia digital
 
Aula08
Aula08Aula08
Aula08
 
Aula02 prod grafica
Aula02 prod graficaAula02 prod grafica
Aula02 prod grafica
 
Aula07
Aula07Aula07
Aula07
 
Aula06
Aula06Aula06
Aula06
 
Aula04
Aula04Aula04
Aula04
 
Aula05
Aula05Aula05
Aula05
 
Aula03 webdesign
Aula03 webdesignAula03 webdesign
Aula03 webdesign
 
Aula02 webdesign
Aula02 webdesignAula02 webdesign
Aula02 webdesign
 
Aula01 webdesign
Aula01 webdesignAula01 webdesign
Aula01 webdesign
 

Aula06 webdesign

  • 1. WEBDESIGN - UNIDADE II - ESTRUTURAÇÃO PARA A CRIAÇÃO DE SITE Usabilidade
  • 2. Conceito - Usabilidade 2  É sinônimo de facilidade de uso.  Se o produto é fácil de usar, o usuário tem maior produtividade, ou seja, aprende mais rápido a usar, memoriza as operações e comete menos erros.
  • 3. Conceito - Usabilidade 3  “Usabilidade está diretamente ligada ao diálogo na interface. É a capacidade do software em permitir que o usuário alcance suas metas de interação com o sistema”-Scapin(1993)
  • 4. Por que usabilidade é importante? 4  Se um site for difícil de usar, o usuário sai.  Se o site não for claro o suficiente para mostrar o que a empresa oferece e o que é possível fazer, o usuário sai e procura o site do concorrente.  Se o usuário se perde, ele sai do site.  Se demorar para carregar, ele sai definitivamente
  • 6. Site não está claro – TWITTER (2006) 6
  • 9. Atributos da USABILIDADE 9  FACILIDADE DE USO Após ter aprendido a interagir com o sistema, o usuário atinge altos níveis de produtividade na realização de suas tarefas.  FACILIDADE DE APRENDIZAGEM O usuário consegue rapidamente explorar o sistema e realizar suas tarefas  FACILIDADE DE MEMORIZAÇÃO DE TAREFAS Os usuários conseguem memorizar as suas tarefas sem sobrecarregar suas interações
  • 10. Atributos da USABILIDADE 10  PREVENÇÃO, VISANDO A REDUÇÃO DE ERROS O usuário realiza suas tarefas sem maiores transtornos e é capaz de recuperar erros, caso ocorram.  SATISFAÇÃO DO INDIVÍDUO Conforto, segurança e felicidade subjetiva
  • 11. Exemplo em SOFTWARE 11 - Atributos de USABILIDADE
  • 12. Aplicações de Usabilidade 12  Percebe-se a sua ausência quando encontramos dificuldades para realizar uma tarefa devido à quantidade de itens a serem decodificados.
  • 16. Elementos de Navegabilidade com 16 Usabilidade Elemento de Interface Posicionamento Marca da empresa Canto superior esquerdo Busca Parte superior Navegação Global Parte superior com links horizontais Navegação Local Coluna da esquerda Breadcrumbs Parte superior, abaixo da marca da empresa Conteúdo global e contextual Área central Navegação do rodapé Parte inferior
  • 17. Elementos de Navegabilidade com 17 Usabilidade
  • 18. Elementos de Navegabilidade com 18 Usabilidade
  • 19. Elementos de Navegabilidade com 19 Usabilidade
  • 20. Breadcrumbs (navegação estrutural) 20  Quando após uma pesquisa realizada, aparece uma sequência de links apresentando uma navegação estrutural complementar.
  • 21. 5 ERROS QUE DEVE SER EVITADOS 21 1. Conteúdo importante em janelas pop-up
  • 22. 5 ERROS QUE DEVE SER EVITADOS 22 2. Animações de Abertura
  • 23. 5 ERROS QUE DEVE SER EVITADOS 23 3. Música no site
  • 24. 5 ERROS QUE DEVE SER EVITADOS 24 4. Esta página está em construção
  • 25. 5 ERROS QUE DEVE SER EVITADOS 25 5. Esta página está em construção
  • 26. 7 regras básicas de usabilidade 26 1. Clareza na arquitetura da informação 2. Facilidade de navegação 3. Simplicidade 4. Relevância de conteúdo 5. Manter a consistência 6. Tempo suportável 7. Foco nos usuários
  • 27. 7 regras básicas de usabilidade 27 1. Clareza na arquitetura da informação - essencial que o usuário consiga discernir o que é prioritário e o que é secundário no site - bom arranjo da informação - usuários ao terem dificuldades em encontrar o que procuram devem ter uma forma de ajuda. Ex: mapa do site
  • 28. 7 regras básicas de usabilidade 28 2. Facilidade de navegação - A informação deve ser acessada com no máximo 3 cliques.
  • 29. 7 regras básicas de usabilidade 29 3. Simplicidade - Quem navega quer encontrar o que deseja o mais rápido possível - Efeitos especiais devem ser evitados para que não confunda o usuário ao buscar uma informação
  • 30. 7 regras básicas de usabilidade 30 4. Relevância do conteúdo - O texto deve ser conciso e objetivo - A informação deve adaptada dentro da mídia utilizada.
  • 31. 7 regras básicas de usabilidade 31 5. Manter a consistência - Quando a operação do site acontece sempre da mesma forma, o usuário não fica à mercê de surpresas de navegabilidade. - Um site deve ser gerenciado como um projeto único de interface com o usuário.
  • 32. 7 regras básicas de usabilidade 32 6. Tempo suportável - Tempo de carregamento das páginas deve ser curto - Uma pesquisa realizada por Jakob Nielsen prova que 10 segundos é o tempo máximo antes que as pessoas percam o interesse pelo site.
  • 33. 7 regras básicas de usabilidade 33 7. Foco nos usuários - Pense sempre no usuário antes dele precisar de você. - Pense sempre nos instrumentos de pesquisa, nas interfaces dos sistemas de gerenciamento e na relação direta do usuário com a informação
  • 34. Testes de usabilidade 34 Eficiência - Quanto tempo demora para realizar tarefas básicas? (ex: criar nova conta, concluir um pedido) Acuracidade - Quantos erros as pessoas cometeram? (os erros interromperam a navegação ou os usuários conseguiram chegar ao seu objetivo?)
  • 35. Testes de usabilidade 35 Recall - Quanto a pessoa lembra após a interação ou períodos de inatividade? Resposta emocional - Como as pessoas se sentem sobre as tarefas concluídas? A pessoa está confiante ou confusa? O usuário recomendaria este site para um amigo?
  • 36. REFERÊNCIAS 36  www.useit.com  www.usabilidoido.com.br  KRUG, Steve. Não me faça pensar. Uma abordagem de Bom Senso à Usabilidade na Web. São Paulo, SP. Editora Alta Books, 2008.  NIELSEN, Jakob. Projetando Websites. São Paulo, SP. Editora Campus, 2010.
  • 37. OBRIGADO! 37  PROF. SERGIO XAVIER E-mail: sergiosx@gmail.com Blog: www.profsergioxavier.wordpress.com