SlideShare ist ein Scribd-Unternehmen logo
1 von 22
DIRETRIZES DE USABILIDADE Como Aplicá-las na Disponibilização das Ferramentas de Relacionamento Digital em Páginas Web? @Deivid_Lima
[object Object],(USEITa, 2010). Páginas Excessivamente Longas
23%dos usuários rolaram a telapara visualizar o que mais o site oferece. Isto significando que 77% dos usuários nãorealizaram a mesma ação.  Páginas Excessivamente Longas Curiosidades
Mas, o que isso tem haver com usabilidade para a disposição das ferramentas de relacionamentodigital? Páginas Excessivamente Longas E???
	Se fizermos uma varredora em alguns sites perceberemos que a maioria coloca as ferramentas de relacionamento digital – Twitter, Facebook, Linked-in, email, etc– abaixo da primeira dobra. A pergunta que não quer cala. Porquê, se acima dela é o melhor lugar da Web? Páginas Excessivamente Longas
#FicaaDica ,[object Object],[object Object]
Procuramos informações importantes e ignoramos qualquer coisa que consideremos desnecessárias.,[object Object]
“[...] De fato qualquer coisa [...] colorida corre o risco de ser ignorado, particularmente se incluir animação” (NIELSEN e LORANGER, 2007, p. 76).Elementos de design que parecem anúncios Cegueira a Banners
[object Object]
A reação involuntária de ignorar a tudo que se pareça com anúncios faz com que os usuários não levem em consideração a leitura do elemento apresentado.Elementos de design que parecem anúncios Cegueira a Banners
Elementos de design que parecem anúncios Cegueira a Banners ,[object Object],(Nielsen ,USEITb, 2010). ,[object Object],Nielsen e Loranger
#FicaaDica ,[object Object],Nielsen e Loranger
	O fato de maior relevância que se faz necessário compreender basicamente é que: os usuários não estão procurando uma agulha no palheiro.  ,[object Object]
80% dos participantes que participaram do estudo para este artigo Não encontraram o campo para cadastro de email no site Submarino.com.Elementos de design que parecem anúncios Animação na Disposição das Ferramentas de Relacionamento Digital
Elementos de design que parecem anúncios Animação na Disposição das Ferramentas de Relacionamento Digital ,[object Object]
“Esperar que a navegação lentamente [...] exiba alguma animação é um desperdício de tempo. [...] isso pode ser mais problemático do que útil. [...] é muito mais rápido para todo mundo examinar as opções quando elas simplesmente estão visíveis” (NIELSEN; LORANGER). ,[object Object]
#FicaaDica Simplifique!!! Disponibilizar as ferramentas de relacionamento digital estaticamente é mais produtivodo quer incluir animações.  Quanto menos tempoo usuário levar para realizar uma ação, maior será a probabilidade de realizar com sucesso.
“Quando bem escolhidos, podem permitir um reconhecimento mais rápidodo que as palavras. Além disso, não dependem do idioma e, portanto possibilitam o uso da interface em diversos países, sem a necessidade de tradução.” (Ferreira, Nunes, 2088) Imagens Icônicas
Os ícones precisam ter três características ,[object Object]
Fácil recordação
Fácil discriminação“Os ícones escolhidos devem expressar com precisão seus objetivos” (Ferreira & Nunes, 2008) Imagens Icônicas Reconhecimento Mais Rápido
#FicaaDica 	Um dos grandes conceitos de design é a simplicidade. Ela certamente “constitui um princípio importante no design” (PREECE et al., 2005).  A utilização de ícones é uma boa sugestão de simplificar; são mais fáceis de serem discernidos.

Weitere ähnliche Inhalte

Ähnlich wie Diretrizes de Usabilidade: Como dispor os meios de relacionamento digitais?

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árioguest479a40
 
UX - User Experience (Experiência do usuário) para Mobile
UX - User Experience (Experiência do usuário) para MobileUX - User Experience (Experiência do usuário) para Mobile
UX - User Experience (Experiência do usuário) para MobileCamila Massaneiro dos Santos
 
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 e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e UsabilidadeClaudio Toldo
 
Introdução a Internet
Introdução a InternetIntrodução a Internet
Introdução a InternetMarcio Duarte
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 
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
 
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
 
Deep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXDeep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXNelson Vasconcelos
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface DesignEdu Agni
 
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 WebKeidi Nienkotter
 
Principios do Design de Interfaces aplicados a Busca
Principios do Design de Interfaces aplicados a BuscaPrincipios do Design de Interfaces aplicados a Busca
Principios do Design de Interfaces aplicados a BuscaAnna Raquel Serra
 
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).pdfssuser595b1e1
 
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...Design Archiv UP
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototypeeudisnet
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na WebMarcelo Vianna
 

Ähnlich wie Diretrizes de Usabilidade: Como dispor os meios de relacionamento digitais? (20)

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
 
Navegacao
NavegacaoNavegacao
Navegacao
 
UX - User Experience (Experiência do usuário) para Mobile
UX - User Experience (Experiência do usuário) para MobileUX - User Experience (Experiência do usuário) para Mobile
UX - User Experience (Experiência do usuário) para Mobile
 
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 e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Introdução a Internet
Introdução a InternetIntrodução a Internet
Introdução a Internet
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
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
 
Design de Interação 2008
Design de Interação 2008Design de Interação 2008
Design de Interação 2008
 
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
 
Deep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXDeep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UX
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface Design
 
Seminario
SeminarioSeminario
Seminario
 
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
 
Principios do Design de Interfaces aplicados a Busca
Principios do Design de Interfaces aplicados a BuscaPrincipios do Design de Interfaces aplicados a Busca
Principios do Design de Interfaces aplicados a Busca
 
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
 
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototype
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
 
Engenharia de Usabilidade
Engenharia de UsabilidadeEngenharia de Usabilidade
Engenharia de Usabilidade
 

Diretrizes de Usabilidade: Como dispor os meios de relacionamento digitais?

  • 1. DIRETRIZES DE USABILIDADE Como Aplicá-las na Disponibilização das Ferramentas de Relacionamento Digital em Páginas Web? @Deivid_Lima
  • 2.
  • 3. 23%dos usuários rolaram a telapara visualizar o que mais o site oferece. Isto significando que 77% dos usuários nãorealizaram a mesma ação. Páginas Excessivamente Longas Curiosidades
  • 4. Mas, o que isso tem haver com usabilidade para a disposição das ferramentas de relacionamentodigital? Páginas Excessivamente Longas E???
  • 5. Se fizermos uma varredora em alguns sites perceberemos que a maioria coloca as ferramentas de relacionamento digital – Twitter, Facebook, Linked-in, email, etc– abaixo da primeira dobra. A pergunta que não quer cala. Porquê, se acima dela é o melhor lugar da Web? Páginas Excessivamente Longas
  • 6.
  • 7.
  • 8. “[...] De fato qualquer coisa [...] colorida corre o risco de ser ignorado, particularmente se incluir animação” (NIELSEN e LORANGER, 2007, p. 76).Elementos de design que parecem anúncios Cegueira a Banners
  • 9.
  • 10. A reação involuntária de ignorar a tudo que se pareça com anúncios faz com que os usuários não levem em consideração a leitura do elemento apresentado.Elementos de design que parecem anúncios Cegueira a Banners
  • 11.
  • 12.
  • 13.
  • 14. 80% dos participantes que participaram do estudo para este artigo Não encontraram o campo para cadastro de email no site Submarino.com.Elementos de design que parecem anúncios Animação na Disposição das Ferramentas de Relacionamento Digital
  • 15.
  • 16.
  • 17. #FicaaDica Simplifique!!! Disponibilizar as ferramentas de relacionamento digital estaticamente é mais produtivodo quer incluir animações. Quanto menos tempoo usuário levar para realizar uma ação, maior será a probabilidade de realizar com sucesso.
  • 18. “Quando bem escolhidos, podem permitir um reconhecimento mais rápidodo que as palavras. Além disso, não dependem do idioma e, portanto possibilitam o uso da interface em diversos países, sem a necessidade de tradução.” (Ferreira, Nunes, 2088) Imagens Icônicas
  • 19.
  • 21. Fácil discriminação“Os ícones escolhidos devem expressar com precisão seus objetivos” (Ferreira & Nunes, 2008) Imagens Icônicas Reconhecimento Mais Rápido
  • 22. #FicaaDica Um dos grandes conceitos de design é a simplicidade. Ela certamente “constitui um princípio importante no design” (PREECE et al., 2005). A utilização de ícones é uma boa sugestão de simplificar; são mais fáceis de serem discernidos.
  • 23. Outro problema facilmente encontrado é o não agrupamento das ferramentas de relacionamento digital nas páginas Web. São espalhadas por varias áreas do site o que torna a busca complexa. Agrupamento de Itens Semelhantes
  • 24. “Agrupar itens associados garante que eles serão notados” (Nielsen e Loranger (2007). É comum para o usuário procurar por objetos quese relacionem em categorias na mesma área, diz Nielsen e Loranger em seu livro Usabilidade na Web. Agrupamento de Itens Semelhantes
  • 25. #FicaaDica Agrupeas ferramentas de relacionamento, isto ajudaráaos usuários a encontrá-lascom maior facilidade.
  • 26.
  • 27. 2º - Evite elementos de design que se pareçam com banner;
  • 28. 3º - Evite animações ao dispor os meios de relacionamento digital;
  • 29.