SlideShare uma empresa Scribd logo
Dicas na construção de interfaces Web




Carlos Eduardo Treméa de Oliveira       kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Usabilidade:
         Termo para descrever a qualidade da interação de uma interface com os
         usuários.




Carlos Eduardo Treméa de Oliveira                  kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Usabilidade:
         Termo para descrever a qualidade da interação de uma interface com os
         usuários.

         A usabilidade se determina pelas seguintes características:

              Capacidade de aprendizado rápido
              Dificuldade de esquecimentos
              Ausência de erros operacionais




                      Satisfação do usuário



Carlos Eduardo Treméa de Oliveira                          kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


A importância das cores:
         Dicas para a criação de um site harmonioso
         Utilize destaques de cor para capturar o olhar do usuário.
         O significado das cores não é universal.
         Use poucas cores.
         A cor de um website deve estar ligada às cores usadas no logotipo da
         empresa.
         Usar cores iguais para elementos relacionados entre si.
         Usar cores para realçar informações




Carlos Eduardo Treméa de Oliveira                     kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


A importância das cores:
         Dicas para a criação de um site harmonioso

            A cor caracteriza um website




                    Site antigo                                  Site novo




Carlos Eduardo Treméa de Oliveira                     kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


A importância das cores:




         As linhas entre os itens        Sem confusão visual. Destaque
        acrescentam muita confusão.      total nos links e não no design do
        Alguns usuários teriam uma       menu.
        confusão visual ao percorrer o
        menu.


Carlos Eduardo Treméa de Oliveira                kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Hierarquia visual:
         Mostre com clareza e precisão os elementos da página que se relacionam
         entre si.
          Uma boa forma de tornar a página fácil de ser compreendida mesmo
         que o usuário esteja com pressa.
          Deixar proeminente o que é importante.
          Relacione visualmente o que for relacionado logicamente.
          Aninhar elementos para mostrar quais fazem parte de quais.
         Deixe claro o que pode ser clicado.




Carlos Eduardo Treméa de Oliveira                   kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Hierarquia visual:
         Exemplos:

                                              Muito Importante
            Livros de informática                   Um pouco menos
               Um livro em particular                 Importante
                 Lorem Ipsum is                    Nem um pouco importante
                 simply dummy text
                 of the printing and
                 typesetting industry.
                                              Axé
                 Lorem Ipsum has              Dance
                 been                         Instrumental
                                              Pagode
                                              Pop
                                              Rock
                                              Sertanejo




Carlos Eduardo Treméa de Oliveira        kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Hierarquia visual:
         Com hierarquias visuais o leitor tem informações úteis sobre o conteúdo
         da página antes mesmo de ler uma única palavra.
                                                                  Resumo da
                                                                  notícia principal

          O tamanho
          do
          cabeçalho
          deixa claro                                             O cabeçalho
          que essa e a                                            englobando as
          história                                                duas colunas
          mais                                                    de texto torna
          importante                                              óbvio que
                                                                  ambos fazem
                                                                  parte da
                                                                  mesma história

Carlos Eduardo Treméa de Oliveira                   kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Hierarquia visual:
         O usuário não tem dificuldade em encontrar a informação que procura. O
         conteúdo está dividido em áreas claramente definidas.




            http://www.ist.utl.pt/ (Original)



Carlos Eduardo Treméa de Oliveira                  kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Convenções:




Carlos Eduardo Treméa de Oliveira       kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Sistemas Globalizados:
         Um website é um sistema globalizado, rompem barreiras geográficas e
         culturais e são acessados por pessoas de diversas partes do mundo.
          Os seres humanos diferem muito entre si.
              • Termos técnicos
              • Gírias




Carlos Eduardo Treméa de Oliveira                     kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Sistemas Globalizados:
         O fluxo lógico da informação não é constante. Em alguns países, lê -se da
        direita para esquerda. Veja a solução adotada pelo google




Carlos Eduardo Treméa de Oliveira                     kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Ícones:
         O ícone indica visualmente a existência de uma aplicação ou representa
         uma ação (abrir, fechar um programa...).
          Quando bem aplicado possibilita um reconhecimento mais rápido que as
         palavras.
          Não dependem do idioma
          Imagens não são reconhecidas universalmente




                                    Ícones não-universais




                                         Ícones universais

Carlos Eduardo Treméa de Oliveira                             kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Aceitação de imagens:
         O que é aceito em um lugar pode ser rejeitado em outro, devido as
         diferenças nas normas sociais.
          O uso indevido de uma imagem pode ofender uma cultura
              • No Egito, as mulheres não aceitam pernas expostas
              • Na Índia, considera-se o uso da mão esquerda uma falta de
              educação grave. Exemplo: estender a mão esquerda para alguém.
              • Em Cingapura, a cegonha representa a morte materna.




Carlos Eduardo Treméa de Oliveira                   kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Aceitação de imagens:
         Em alguns países como Brasil e Alemanha, o gesto adotado nos EUA para
         simbolizar “OK” é considerado vulgar.




Carlos Eduardo Treméa de Oliveira                  kadunew.com/blog | @kadunew
Dicas na construção de interfaces Web


Formulários:
          Seu uso deve ser obrigatório
          Não solicite informações que não vão ser úteis para você.
          Evite formulários longos.
          Campos de preenchimento obrigatórios




Carlos Eduardo Treméa de Oliveira                    kadunew.com/blog | @kadunew

Mais conteúdo relacionado

Semelhante a Construcao de interfaces web

Redação para Web
Redação para WebRedação para Web
Redação para Web
GovBR
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
maumoreira
 
Web 2.0 + Foco no Usuário
Web 2.0 + Foco no UsuárioWeb 2.0 + Foco no Usuário
Web 2.0 + Foco no Usuário
guest479a40
 
Palestra - Na quebrada da Web
Palestra - Na quebrada da WebPalestra - Na quebrada da Web
Palestra - Na quebrada da Web
Felipe Caroé
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
Suzana Viana Mota
 
Web Standards
Web StandardsWeb Standards
Web Standards
Pedro Tavares
 
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Pedro Tavares
 
Melhores Práticas de Usabilidade no Desenvolvimento Web
Melhores Práticas de Usabilidade no Desenvolvimento WebMelhores Práticas de Usabilidade no Desenvolvimento Web
Melhores Práticas de Usabilidade no Desenvolvimento Web
Keidi Nienkotter
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Ricardo Pereira Rodrigues
 
Texto apoio 5 indicqualsitesedaac
Texto apoio 5 indicqualsitesedaacTexto apoio 5 indicqualsitesedaac
Texto apoio 5 indicqualsitesedaac
ricaselmavera
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
Campus Party Brasil
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
Rogério Chiavegatti
 
Web_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web SemânticaWeb_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web Semântica
Crystiam Pereira E Silva
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
ssuser595b1e1
 
A usabilidade na interface
A usabilidade na interfaceA usabilidade na interface
A usabilidade na interface
Odair Cavichioli
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Redes sociais aabb em tela
Redes sociais   aabb em telaRedes sociais   aabb em tela
Redes sociais aabb em tela
Lívia Neiva
 
Não me faça pensar
Não me faça pensarNão me faça pensar
Não me faça pensar
Marcel Guinther
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
Israel Degasperi
 

Semelhante a Construcao de interfaces web (20)

Redação para Web
Redação para WebRedação para Web
Redação para Web
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Web 2.0 + Foco no Usuário
Web 2.0 + Foco no UsuárioWeb 2.0 + Foco no Usuário
Web 2.0 + Foco no Usuário
 
Palestra - Na quebrada da Web
Palestra - Na quebrada da WebPalestra - Na quebrada da Web
Palestra - Na quebrada da Web
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03Laboratório Audivisual Hipermedia Aula3 4 13 22 03
Laboratório Audivisual Hipermedia Aula3 4 13 22 03
 
Melhores Práticas de Usabilidade no Desenvolvimento Web
Melhores Práticas de Usabilidade no Desenvolvimento WebMelhores Práticas de Usabilidade no Desenvolvimento Web
Melhores Práticas de Usabilidade no Desenvolvimento Web
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
Texto apoio 5 indicqualsitesedaac
Texto apoio 5 indicqualsitesedaacTexto apoio 5 indicqualsitesedaac
Texto apoio 5 indicqualsitesedaac
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
 
Web_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web SemânticaWeb_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web Semântica
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
A usabilidade na interface
A usabilidade na interfaceA usabilidade na interface
A usabilidade na interface
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Redes sociais aabb em tela
Redes sociais   aabb em telaRedes sociais   aabb em tela
Redes sociais aabb em tela
 
Não me faça pensar
Não me faça pensarNão me faça pensar
Não me faça pensar
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
 

Mais de Carlos Eduardo Kadu

Framework Foundation Basicão
Framework Foundation BasicãoFramework Foundation Basicão
Framework Foundation Basicão
Carlos Eduardo Kadu
 
Pesquisa no Twitter - Requisição com API JSON
Pesquisa no Twitter - Requisição com API JSONPesquisa no Twitter - Requisição com API JSON
Pesquisa no Twitter - Requisição com API JSON
Carlos Eduardo Kadu
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
Carlos Eduardo Kadu
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
Carlos Eduardo Kadu
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Tcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemasTcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemas
Carlos Eduardo Kadu
 
Treinamento Comercial Microlins
Treinamento Comercial Microlins Treinamento Comercial Microlins
Treinamento Comercial Microlins
Carlos Eduardo Kadu
 

Mais de Carlos Eduardo Kadu (7)

Framework Foundation Basicão
Framework Foundation BasicãoFramework Foundation Basicão
Framework Foundation Basicão
 
Pesquisa no Twitter - Requisição com API JSON
Pesquisa no Twitter - Requisição com API JSONPesquisa no Twitter - Requisição com API JSON
Pesquisa no Twitter - Requisição com API JSON
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Tcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemasTcc ii curso análise e desenvolvimento de sistemas
Tcc ii curso análise e desenvolvimento de sistemas
 
Treinamento Comercial Microlins
Treinamento Comercial Microlins Treinamento Comercial Microlins
Treinamento Comercial Microlins
 

Construcao de interfaces web

  • 1. Dicas na construção de interfaces Web Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 2. Dicas na construção de interfaces Web Usabilidade: Termo para descrever a qualidade da interação de uma interface com os usuários. Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 3. Dicas na construção de interfaces Web Usabilidade: Termo para descrever a qualidade da interação de uma interface com os usuários. A usabilidade se determina pelas seguintes características:  Capacidade de aprendizado rápido  Dificuldade de esquecimentos  Ausência de erros operacionais Satisfação do usuário Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 4. Dicas na construção de interfaces Web A importância das cores: Dicas para a criação de um site harmonioso Utilize destaques de cor para capturar o olhar do usuário. O significado das cores não é universal. Use poucas cores. A cor de um website deve estar ligada às cores usadas no logotipo da empresa. Usar cores iguais para elementos relacionados entre si. Usar cores para realçar informações Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 5. Dicas na construção de interfaces Web A importância das cores: Dicas para a criação de um site harmonioso A cor caracteriza um website Site antigo Site novo Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 6. Dicas na construção de interfaces Web A importância das cores:  As linhas entre os itens  Sem confusão visual. Destaque acrescentam muita confusão. total nos links e não no design do Alguns usuários teriam uma menu. confusão visual ao percorrer o menu. Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 7. Dicas na construção de interfaces Web Hierarquia visual: Mostre com clareza e precisão os elementos da página que se relacionam entre si.  Uma boa forma de tornar a página fácil de ser compreendida mesmo que o usuário esteja com pressa.  Deixar proeminente o que é importante.  Relacione visualmente o que for relacionado logicamente.  Aninhar elementos para mostrar quais fazem parte de quais. Deixe claro o que pode ser clicado. Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 8. Dicas na construção de interfaces Web Hierarquia visual: Exemplos: Muito Importante Livros de informática Um pouco menos Um livro em particular Importante Lorem Ipsum is Nem um pouco importante simply dummy text of the printing and typesetting industry. Axé Lorem Ipsum has Dance been Instrumental Pagode Pop Rock Sertanejo Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 9. Dicas na construção de interfaces Web Hierarquia visual: Com hierarquias visuais o leitor tem informações úteis sobre o conteúdo da página antes mesmo de ler uma única palavra. Resumo da notícia principal O tamanho do cabeçalho deixa claro O cabeçalho que essa e a englobando as história duas colunas mais de texto torna importante óbvio que ambos fazem parte da mesma história Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 10. Dicas na construção de interfaces Web Hierarquia visual: O usuário não tem dificuldade em encontrar a informação que procura. O conteúdo está dividido em áreas claramente definidas. http://www.ist.utl.pt/ (Original) Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 11. Dicas na construção de interfaces Web Convenções: Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 12. Dicas na construção de interfaces Web Sistemas Globalizados: Um website é um sistema globalizado, rompem barreiras geográficas e culturais e são acessados por pessoas de diversas partes do mundo.  Os seres humanos diferem muito entre si. • Termos técnicos • Gírias Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 13. Dicas na construção de interfaces Web Sistemas Globalizados:  O fluxo lógico da informação não é constante. Em alguns países, lê -se da direita para esquerda. Veja a solução adotada pelo google Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 14. Dicas na construção de interfaces Web Ícones: O ícone indica visualmente a existência de uma aplicação ou representa uma ação (abrir, fechar um programa...).  Quando bem aplicado possibilita um reconhecimento mais rápido que as palavras.  Não dependem do idioma  Imagens não são reconhecidas universalmente Ícones não-universais  Ícones universais Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 15. Dicas na construção de interfaces Web Aceitação de imagens: O que é aceito em um lugar pode ser rejeitado em outro, devido as diferenças nas normas sociais.  O uso indevido de uma imagem pode ofender uma cultura • No Egito, as mulheres não aceitam pernas expostas • Na Índia, considera-se o uso da mão esquerda uma falta de educação grave. Exemplo: estender a mão esquerda para alguém. • Em Cingapura, a cegonha representa a morte materna. Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 16. Dicas na construção de interfaces Web Aceitação de imagens: Em alguns países como Brasil e Alemanha, o gesto adotado nos EUA para simbolizar “OK” é considerado vulgar. Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  • 17. Dicas na construção de interfaces Web Formulários:  Seu uso deve ser obrigatório  Não solicite informações que não vão ser úteis para você.  Evite formulários longos.  Campos de preenchimento obrigatórios Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew