SlideShare uma empresa Scribd logo
USABILIDADE
“ Não me faça pensar ” Steve Krug “ “
Usabilidade é... ... facilidade no uso ... intuição ... mais visitantes ... investimento
? Ao entrar em um site, o  usuário NÃO deve se perguntar: Que site é esse? O que faço aqui? Onde está tal informação? O que esse símbolo quer dizer?
MISSÃO DE UM SITE Pergunte-se ANTES Por que esse site deve existir? Qual a natureza desse site? - informativo - serviço - entretenimento - institucional... ? ?
Pergunte-se ANTES Por que alguém o visitaria? ? Que imagem o site quer passar? - inovador - ágil - divertido - útil... ? Quem o visitaria? ?
PÚBLICO Pergunte-se ANTES Como ele prefere acessar o conteúdo online? Vídeo? Fotos? Texto? Infográfico? Animação? Tabela? ? Ele quer se comunicar com outros usuários? ?
Pergunte-se ANTES Ele quer se comunicar com você? ? Ele quer produzir conteúdo? Que tipo? ? O que o público procura em sites concorrentes que o seu ainda não oferece? ?
Pergunte-se ANTES QUAIS OS HÁBITOS DE NAVEGAÇÃO DO SEU USUÁRIO? ? Quer modismos ou formas básicas? ?
QUANTIDADE DE INFORMAÇÃO > ANSIEDADE E RAPIDEZ Não há muita reflexão de leitura na web. Internautas procuram informação até o TERCEIRO clique.
Jacob Nielsen - o papa da usabilidade, desconstruiu vários sites e fez um estudo que mostrou...
Padrão de leitura em F Estudo de Jackob Nielsen com 232 internautas visitando centenas de sites
Implicações da leitura em F
Implicações da leitura em F Internautas não lêem palavra por palavra (SCANNABLE READER) Intertítulos, parágrafos e “bullet points” devem começar com palavras-chave para que os usuários sejam capazes de perceber rapidamente quando fazem a trilha “vertical” do padrão em F. Coloque as informações/ações mais importantes no primeiro scroll F F F
 
 
 
 
 
 
 
 
 
 
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Sequência lógica Identidade visual e Navegação
CERTO
ERRADO
ERRADO
Caminho de navegação  - na web não há senso de direção ;-)
ERRADO
NUNCA façam isso...
... muito menos ISSO!!
Recapitulando... USABILIDADE É FACILIDADE NO USO!
... quanto menos cliques, melhor ... seja claro nos menus ... sinalize bem os links ... mantenha a identidade do site em TODAS as páginas ... evite ao máximo o botão BACK ... diga logo a que veio ... prefira a simplicidade gráfica
Se a usabilidade é  boa , o público... ...encontra o que procura ...fica satisfeito por conseguir o que deseja (assistir, ler, comentar, comprar, jogar etc.) ...volta (e fica fiel ao seu produto) Se a usabilidade é  ruim , o público... ...não encontra o que procura ...fica frustrado por não conseguir o que deseja (assistir, ler, comentar, comprar, jogar etc.) ...não volta (e vai atrás do concorrente)
Para não esquecer... Não vale ser bonito se for difícil de usar. Não vale ter o melhor conteúdo se a navegação é um enigma. Informações e recursos dispostos de forma simples, clara, fácil e eficiente resultam em boa usabilidade.

Mais conteúdo relacionado

Semelhante a Keynote Usabilidade

12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 
Caracteristicas da Usabilidade
Caracteristicas da UsabilidadeCaracteristicas da Usabilidade
Caracteristicas da UsabilidadeFernando Vargas
 
Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Horácio Soares
 
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBAWeb design - Usabilidade - IFBA
Web design - Usabilidade - IFBAMatheus Brito
 
Internet Marketing Road Show Presentation
Internet Marketing Road Show PresentationInternet Marketing Road Show Presentation
Internet Marketing Road Show PresentationFabio Seixas
 
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
 
1a aula 21maio_principioswebwriting
1a aula 21maio_principioswebwriting1a aula 21maio_principioswebwriting
1a aula 21maio_principioswebwritingIvone Rocha
 
Não me faça pensar
Não me faça pensarNão me faça pensar
Não me faça pensarWebgoal
 
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010Renata Tibiriçá
 
Navegação e arquitetura de informação
Navegação e arquitetura de informaçãoNavegação e arquitetura de informação
Navegação e arquitetura de informaçãoWellington Oliveira
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJHorácio Soares
 
Fundamentos de webdesing, tecnologia e ubiquidade - 15/4/15
Fundamentos de webdesing, tecnologia e ubiquidade - 15/4/15Fundamentos de webdesing, tecnologia e ubiquidade - 15/4/15
Fundamentos de webdesing, tecnologia e ubiquidade - 15/4/15Renato Cruz
 
Palestra . Redes Sociais & Empregabilidade (Bruno Cardoso e Vinícius Pinto)
Palestra . Redes Sociais & Empregabilidade (Bruno Cardoso e Vinícius Pinto)Palestra . Redes Sociais & Empregabilidade (Bruno Cardoso e Vinícius Pinto)
Palestra . Redes Sociais & Empregabilidade (Bruno Cardoso e Vinícius Pinto)Bruno Cardoso
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
O usuario esta bebado - UX eh pra todo mundo - 15 min
O usuario esta bebado - UX eh pra todo mundo - 15 minO usuario esta bebado - UX eh pra todo mundo - 15 min
O usuario esta bebado - UX eh pra todo mundo - 15 minAdriano Schmidt
 
Manual Para Site
Manual Para SiteManual Para Site
Manual Para SiteDomitri
 
Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto
Aula 2 da 2ª Turma de Marketing Digital em Ribeirão PretoAula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto
Aula 2 da 2ª Turma de Marketing Digital em Ribeirão PretoEstrategia Digital
 

Semelhante a Keynote Usabilidade (20)

Ux vs Ui
Ux vs UiUx vs Ui
Ux vs Ui
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Caracteristicas da Usabilidade
Caracteristicas da UsabilidadeCaracteristicas da Usabilidade
Caracteristicas da Usabilidade
 
Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011Circuito4x1 Acessibilidade e ecommerce-abril-2011
Circuito4x1 Acessibilidade e ecommerce-abril-2011
 
Web design - Usabilidade - IFBA
Web design - Usabilidade - IFBAWeb design - Usabilidade - IFBA
Web design - Usabilidade - IFBA
 
Internet Marketing Road Show Presentation
Internet Marketing Road Show PresentationInternet Marketing Road Show Presentation
Internet Marketing Road Show Presentation
 
Ebook ui-design-v2
Ebook ui-design-v2Ebook ui-design-v2
Ebook ui-design-v2
 
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
 
1a aula 21maio_principioswebwriting
1a aula 21maio_principioswebwriting1a aula 21maio_principioswebwriting
1a aula 21maio_principioswebwriting
 
Não me faça pensar
Não me faça pensarNão me faça pensar
Não me faça pensar
 
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
 
Navegação e arquitetura de informação
Navegação e arquitetura de informaçãoNavegação e arquitetura de informação
Navegação e arquitetura de informação
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJ
 
Fundamentos de webdesing, tecnologia e ubiquidade - 15/4/15
Fundamentos de webdesing, tecnologia e ubiquidade - 15/4/15Fundamentos de webdesing, tecnologia e ubiquidade - 15/4/15
Fundamentos de webdesing, tecnologia e ubiquidade - 15/4/15
 
Palestra . Redes Sociais & Empregabilidade (Bruno Cardoso e Vinícius Pinto)
Palestra . Redes Sociais & Empregabilidade (Bruno Cardoso e Vinícius Pinto)Palestra . Redes Sociais & Empregabilidade (Bruno Cardoso e Vinícius Pinto)
Palestra . Redes Sociais & Empregabilidade (Bruno Cardoso e Vinícius Pinto)
 
Presença digital
Presença digitalPresença digital
Presença digital
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
O usuario esta bebado - UX eh pra todo mundo - 15 min
O usuario esta bebado - UX eh pra todo mundo - 15 minO usuario esta bebado - UX eh pra todo mundo - 15 min
O usuario esta bebado - UX eh pra todo mundo - 15 min
 
Manual Para Site
Manual Para SiteManual Para Site
Manual Para Site
 
Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto
Aula 2 da 2ª Turma de Marketing Digital em Ribeirão PretoAula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto
Aula 2 da 2ª Turma de Marketing Digital em Ribeirão Preto
 

Mais de Ana Brambilla

Social Media Metrics
Social Media MetricsSocial Media Metrics
Social Media MetricsAna Brambilla
 
Social Media Strategy
Social Media StrategySocial Media Strategy
Social Media StrategyAna Brambilla
 
Gift economy, moral economy
Gift economy, moral economyGift economy, moral economy
Gift economy, moral economyAna Brambilla
 
Facebook e Social Traffic
Facebook e Social TrafficFacebook e Social Traffic
Facebook e Social TrafficAna Brambilla
 
Consumo de Mídias Digitais
Consumo de Mídias DigitaisConsumo de Mídias Digitais
Consumo de Mídias DigitaisAna Brambilla
 
Digital Media Business
Digital Media BusinessDigital Media Business
Digital Media BusinessAna Brambilla
 
Data driven products
Data driven productsData driven products
Data driven productsAna Brambilla
 
Business intelligence and big data
Business intelligence and big dataBusiness intelligence and big data
Business intelligence and big dataAna Brambilla
 
Branding and Social Media
Branding and Social MediaBranding and Social Media
Branding and Social MediaAna Brambilla
 
Ethics & Social Awareness
Ethics & Social AwarenessEthics & Social Awareness
Ethics & Social AwarenessAna Brambilla
 
New Lifestyles in the Digital Media
New Lifestyles in the Digital MediaNew Lifestyles in the Digital Media
New Lifestyles in the Digital MediaAna Brambilla
 
McLuhan and the Technology
McLuhan and the TechnologyMcLuhan and the Technology
McLuhan and the TechnologyAna Brambilla
 
Self-Communication & Privacy in the Digital Era
Self-Communication & Privacy in the Digital EraSelf-Communication & Privacy in the Digital Era
Self-Communication & Privacy in the Digital EraAna Brambilla
 
Psychology and digital culture
Psychology and digital culturePsychology and digital culture
Psychology and digital cultureAna Brambilla
 
Paradigm of complexity
Paradigm of complexityParadigm of complexity
Paradigm of complexityAna Brambilla
 
Smart cities (Dubai)
Smart cities (Dubai)Smart cities (Dubai)
Smart cities (Dubai)Ana Brambilla
 
Theory of hypermedia
Theory of hypermediaTheory of hypermedia
Theory of hypermediaAna Brambilla
 

Mais de Ana Brambilla (20)

On demand media
On demand mediaOn demand media
On demand media
 
Social Media Metrics
Social Media MetricsSocial Media Metrics
Social Media Metrics
 
Social Media Strategy
Social Media StrategySocial Media Strategy
Social Media Strategy
 
Gift economy, moral economy
Gift economy, moral economyGift economy, moral economy
Gift economy, moral economy
 
Facebook e Social Traffic
Facebook e Social TrafficFacebook e Social Traffic
Facebook e Social Traffic
 
Consumo de Mídias Digitais
Consumo de Mídias DigitaisConsumo de Mídias Digitais
Consumo de Mídias Digitais
 
Digital Media Business
Digital Media BusinessDigital Media Business
Digital Media Business
 
Data driven products
Data driven productsData driven products
Data driven products
 
Business intelligence and big data
Business intelligence and big dataBusiness intelligence and big data
Business intelligence and big data
 
Branding and Social Media
Branding and Social MediaBranding and Social Media
Branding and Social Media
 
Ethics & Social Awareness
Ethics & Social AwarenessEthics & Social Awareness
Ethics & Social Awareness
 
New Lifestyles in the Digital Media
New Lifestyles in the Digital MediaNew Lifestyles in the Digital Media
New Lifestyles in the Digital Media
 
McLuhan and the Technology
McLuhan and the TechnologyMcLuhan and the Technology
McLuhan and the Technology
 
Netnography
NetnographyNetnography
Netnography
 
Self-Communication & Privacy in the Digital Era
Self-Communication & Privacy in the Digital EraSelf-Communication & Privacy in the Digital Era
Self-Communication & Privacy in the Digital Era
 
Psychology and digital culture
Psychology and digital culturePsychology and digital culture
Psychology and digital culture
 
Paradigm of complexity
Paradigm of complexityParadigm of complexity
Paradigm of complexity
 
Smart cities (Dubai)
Smart cities (Dubai)Smart cities (Dubai)
Smart cities (Dubai)
 
Theory of hypermedia
Theory of hypermediaTheory of hypermedia
Theory of hypermedia
 
Web Celebrity
Web CelebrityWeb Celebrity
Web Celebrity
 

Keynote Usabilidade

  • 2. “ Não me faça pensar ” Steve Krug “ “
  • 3. Usabilidade é... ... facilidade no uso ... intuição ... mais visitantes ... investimento
  • 4. ? Ao entrar em um site, o usuário NÃO deve se perguntar: Que site é esse? O que faço aqui? Onde está tal informação? O que esse símbolo quer dizer?
  • 5. MISSÃO DE UM SITE Pergunte-se ANTES Por que esse site deve existir? Qual a natureza desse site? - informativo - serviço - entretenimento - institucional... ? ?
  • 6. Pergunte-se ANTES Por que alguém o visitaria? ? Que imagem o site quer passar? - inovador - ágil - divertido - útil... ? Quem o visitaria? ?
  • 7. PÚBLICO Pergunte-se ANTES Como ele prefere acessar o conteúdo online? Vídeo? Fotos? Texto? Infográfico? Animação? Tabela? ? Ele quer se comunicar com outros usuários? ?
  • 8. Pergunte-se ANTES Ele quer se comunicar com você? ? Ele quer produzir conteúdo? Que tipo? ? O que o público procura em sites concorrentes que o seu ainda não oferece? ?
  • 9. Pergunte-se ANTES QUAIS OS HÁBITOS DE NAVEGAÇÃO DO SEU USUÁRIO? ? Quer modismos ou formas básicas? ?
  • 10. QUANTIDADE DE INFORMAÇÃO > ANSIEDADE E RAPIDEZ Não há muita reflexão de leitura na web. Internautas procuram informação até o TERCEIRO clique.
  • 11. Jacob Nielsen - o papa da usabilidade, desconstruiu vários sites e fez um estudo que mostrou...
  • 12. Padrão de leitura em F Estudo de Jackob Nielsen com 232 internautas visitando centenas de sites
  • 14. Implicações da leitura em F Internautas não lêem palavra por palavra (SCANNABLE READER) Intertítulos, parágrafos e “bullet points” devem começar com palavras-chave para que os usuários sejam capazes de perceber rapidamente quando fazem a trilha “vertical” do padrão em F. Coloque as informações/ações mais importantes no primeiro scroll F F F
  • 15.  
  • 16.  
  • 17.  
  • 18.  
  • 19.  
  • 20.  
  • 21.  
  • 22.  
  • 23.  
  • 24.  
  • 25.
  • 26.
  • 27. Sequência lógica Identidade visual e Navegação
  • 28. CERTO
  • 31. Caminho de navegação - na web não há senso de direção ;-)
  • 34. ... muito menos ISSO!!
  • 35. Recapitulando... USABILIDADE É FACILIDADE NO USO!
  • 36. ... quanto menos cliques, melhor ... seja claro nos menus ... sinalize bem os links ... mantenha a identidade do site em TODAS as páginas ... evite ao máximo o botão BACK ... diga logo a que veio ... prefira a simplicidade gráfica
  • 37. Se a usabilidade é boa , o público... ...encontra o que procura ...fica satisfeito por conseguir o que deseja (assistir, ler, comentar, comprar, jogar etc.) ...volta (e fica fiel ao seu produto) Se a usabilidade é ruim , o público... ...não encontra o que procura ...fica frustrado por não conseguir o que deseja (assistir, ler, comentar, comprar, jogar etc.) ...não volta (e vai atrás do concorrente)
  • 38. Para não esquecer... Não vale ser bonito se for difícil de usar. Não vale ter o melhor conteúdo se a navegação é um enigma. Informações e recursos dispostos de forma simples, clara, fácil e eficiente resultam em boa usabilidade.