SlideShare una empresa de Scribd logo
1 de 38
ESTUDO DAS MELHORES PRÁTICAS DE USABILIDADE NO DESENVOLVIMENTO WEB Keidi Nienkötter Prof. Orientador Francisco Spaeth
PORQUE ESTUDAR A USABILIDADE? ,[object Object],[object Object],[object Object],[object Object],“ A vida atual pede simplicidade, objetividade, clareza e concisão. Um Website simples é facilmente compreendido, identificado, assimilado... e recordado.” (DAMASCENO, 2003, p. 17)
ARQUITETURA DE INFORMAÇÃO ,[object Object],[object Object],[object Object],“ A arquitetura de informação deve destacar o conteúdo que é realmente relevante em cada página e agrupar as informações da forma mais parecida possível com o modelo mental dos usuários, ou seja, com aquilo que eles pensam.” (MEMÓRIA, 2006)
NAVEGAÇÃO ,[object Object],[object Object],[object Object],“ Navegação clara e bem estruturada é uma das melhores oportunidades que um site possui de criar uma boa impressão” (KRUG, 2006, p. 35).
NAVEGAÇÃO GLOBAL “ Complementa a informação disposta de modo hierárquico (a “taxionomia”), habilitando os movimentos verticais e laterais. É aplicado ao site inteiro e se integra ao design gráfico.” (AGNER, 2006)
NAVEGAÇÃO LOCAL
NAVEGAÇÃO CONTEXTUAL
MIGALHAS DE PÃO ,[object Object],[object Object],[object Object]
FERRAMENTA DE BUSCA ,[object Object],[object Object],[object Object],[object Object],Um pouco mais da metade dos usuários são voltados à busca, cerca de um quinto dos usuários são voltados a links e o resto exibe um comportamento misto. NIELSEN (2000, p.224)
BOTÕES ,[object Object],[object Object],[object Object]
LINKS ,[object Object],[object Object],“ As palavras ‘Clique’ e ‘Aqui’ dificilmente contêm informações e, portanto, não devem ser usadas como elementos de design que atraem a atenção do usuário.” (NIELSEN, 2000, p. 55)
FORMULÁRIOS ,[object Object],[object Object],[object Object],[object Object],[object Object]
PÁGINA PRINCIPAL ,[object Object],[object Object],“ A home page deve conter somente as informações que interessam ao usuário”. (AGNES, 2006)
PÁGINAS INTERNAS ,[object Object],[object Object],[object Object],“ Os usuários devem ser capazes de encontrar links e navegar para sites internos e externos sem perder tempos no portal da empresa propriamente dito.” (AGNES, 2006, p. 67)
TÍTULOS ,[object Object],[object Object],[object Object],“ É importante especificar bons títulos de página, pois os títulos são muitas vezes usados como a principal referência às páginas.” (NIELSEN, 2000, p.123)
CORES ,[object Object],[object Object],Exemplo
Testes de usabilidade ,[object Object],[object Object],“ Os testes de usabilidade são de grande utilidade para que possamos projetar produtos que sejam fáceis de usar e, mais do que isso, capazes de proporcionar uma boa experiência.” (MEMÓRIA, 2006, p. 138)
PESQUISA - COMO FOI DEFINIDA ,[object Object],[object Object],[object Object]
PESQUISA - COMO FOI APLICADA ,[object Object],[object Object],[object Object],[object Object],[object Object]
PESQUISA - RESULTADOS ,[object Object],[object Object],[object Object],[object Object]
PESQUISA - RESULTADOS ,[object Object],[object Object],[object Object],[object Object],[object Object]
PESQUISA - RESULTADOS ,[object Object]
PESQUISA - RESULTADOS ,[object Object]
PESQUISA - RESULTADOS ,[object Object]
PESQUISA - RESULTADOS ,[object Object],[object Object]
PESQUISA - RESULTADOS ,[object Object],[object Object]
PESQUISA - RESULTADOS ,[object Object],[object Object]
PESQUISA - RESULTADOS ,[object Object],Informações mais detalhadas 1 Falta de fotos para alguns imóveis 12 Preço do Villa Vicenza 2 Falta de explicação no formulário 1 Localização Geográfica dos imóveis 3 Busca por preço 2 Imóveis para locação 2 Busca por localização 4 Proprietário dos imóveis 1
PESQUISA - RESULTADOS ,[object Object]
PESQUISA - RESULTADOS ,[object Object],[object Object]
PESQUISA - RESULTADOS ,[object Object]
PESQUISA - RESULTADOS ,[object Object],[object Object],[object Object],[object Object],[object Object]
ANALISE GERAL DA PESQUISA ,[object Object],[object Object],[object Object],[object Object]
CONCLUSÃO ,[object Object],[object Object]
PROPOSTAS DE CONTINUIDADE ,[object Object],[object Object],[object Object]
Referências ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Referências ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Perguntas?

Más contenido relacionado

La actualidad más candente

Falando um pouco sobre Internet
Falando um pouco sobre Internet Falando um pouco sobre Internet
Falando um pouco sobre Internet Denis Budag
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01Renato Melo
 
Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenLuiz Agner
 
Semiotica fundamentos da composição visual (atv07)
Semiotica   fundamentos da composição visual (atv07)Semiotica   fundamentos da composição visual (atv07)
Semiotica fundamentos da composição visual (atv07)aline totti
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2aiadufmg
 
Revendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da webRevendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da webWellington Oliveira
 
Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022Renato Melo
 
Last fm parte 2
Last fm   parte 2Last fm   parte 2
Last fm parte 2aiadufmg
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2aiadufmg
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteIsrael Degasperi
 
Webwriting na Prática
Webwriting na PráticaWebwriting na Prática
Webwriting na Práticapospipoca
 
Linked in parte 2
Linked in   parte 2Linked in   parte 2
Linked in parte 2aiadufmg
 
A usabilidade na interface
A usabilidade na interfaceA usabilidade na interface
A usabilidade na interfaceOdair Cavichioli
 
Planejando a construção de um novo site - O que devo saber?
Planejando a construção de um novo site - O que devo saber?Planejando a construção de um novo site - O que devo saber?
Planejando a construção de um novo site - O que devo saber?Mirago Marketing Digital
 
Usabilidade em Aplicativos
Usabilidade em AplicativosUsabilidade em Aplicativos
Usabilidade em AplicativosRenato Melo
 
Desing de navegação web parte IV
Desing de navegação web parte IVDesing de navegação web parte IV
Desing de navegação web parte IVWellington Marion
 

La actualidad más candente (18)

Falando um pouco sobre Internet
Falando um pouco sobre Internet Falando um pouco sobre Internet
Falando um pouco sobre Internet
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
 
Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro Nielsen
 
Semiotica fundamentos da composição visual (atv07)
Semiotica   fundamentos da composição visual (atv07)Semiotica   fundamentos da composição visual (atv07)
Semiotica fundamentos da composição visual (atv07)
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2
 
Revendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da webRevendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da web
 
Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022
 
Last fm parte 2
Last fm   parte 2Last fm   parte 2
Last fm parte 2
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo Website
 
Webwriting na Prática
Webwriting na PráticaWebwriting na Prática
Webwriting na Prática
 
Linked in parte 2
Linked in   parte 2Linked in   parte 2
Linked in parte 2
 
A usabilidade na interface
A usabilidade na interfaceA usabilidade na interface
A usabilidade na interface
 
Fundamentosdowebdesign
FundamentosdowebdesignFundamentosdowebdesign
Fundamentosdowebdesign
 
Planejando a construção de um novo site - O que devo saber?
Planejando a construção de um novo site - O que devo saber?Planejando a construção de um novo site - O que devo saber?
Planejando a construção de um novo site - O que devo saber?
 
Usabilidade em Aplicativos
Usabilidade em AplicativosUsabilidade em Aplicativos
Usabilidade em Aplicativos
 
Desing de navegação web parte IV
Desing de navegação web parte IVDesing de navegação web parte IV
Desing de navegação web parte IV
 
Planeamento website
Planeamento websitePlaneamento website
Planeamento website
 

Similar a Melhores Práticas de Usabilidade no Desenvolvimento Web

2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03Neca Boullosa
 
Qualidade De Sites no INA ey5yb4y
Qualidade De Sites no INA                      ey5yb4y                      Qualidade De Sites no INA                      ey5yb4y
Qualidade De Sites no INA ey5yb4y guestef5899
 
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
 
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
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e UsabilidadeClaudio Toldo
 
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
 
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
 
Governo Sp Usabilidade Dos Sites Junho 2008
Governo Sp Usabilidade Dos Sites Junho 2008Governo Sp Usabilidade Dos Sites Junho 2008
Governo Sp Usabilidade Dos Sites Junho 2008igovbrasil
 
Usabilidade
UsabilidadeUsabilidade
Usabilidademrseo
 
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5Paulo César Silva
 
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoDesign UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoiMasters
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos CentraisJose Claudio Terra
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos CentraisCarlos Franco
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designerJonathan Prateat
 

Similar a Melhores Práticas de Usabilidade no Desenvolvimento Web (20)

2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03
 
Qualidade De Sites no INA ey5yb4y
Qualidade De Sites no INA                      ey5yb4y                      Qualidade De Sites no INA                      ey5yb4y
Qualidade De Sites no INA ey5yb4y
 
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
 
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
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
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
 
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
 
Governo SP - Usabilidade Dos Sites
Governo SP - Usabilidade Dos SitesGoverno SP - Usabilidade Dos Sites
Governo SP - Usabilidade Dos Sites
 
Governo Sp Usabilidade Dos Sites Junho 2008
Governo Sp Usabilidade Dos Sites Junho 2008Governo Sp Usabilidade Dos Sites Junho 2008
Governo Sp Usabilidade Dos Sites Junho 2008
 
Usabilidade
UsabilidadeUsabilidade
Usabilidade
 
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
USABILIDADE.
USABILIDADE.USABILIDADE.
USABILIDADE.
 
Engenharia de Usabilidade
Engenharia de UsabilidadeEngenharia de Usabilidade
Engenharia de Usabilidade
 
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoDesign UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designer
 

Melhores Práticas de Usabilidade no Desenvolvimento Web

  • 1. ESTUDO DAS MELHORES PRÁTICAS DE USABILIDADE NO DESENVOLVIMENTO WEB Keidi Nienkötter Prof. Orientador Francisco Spaeth
  • 2.
  • 3.
  • 4.
  • 5. NAVEGAÇÃO GLOBAL “ Complementa a informação disposta de modo hierárquico (a “taxionomia”), habilitando os movimentos verticais e laterais. É aplicado ao site inteiro e se integra ao design gráfico.” (AGNER, 2006)
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.

Notas del editor

  1. Difere da navegação global e mantém sua individualidade na apresentação das informações.
  2. A navegação contextual é apresentada dentro do conteúdo utilizando-se de recursos como links, apontando para outra área do Website em questão ou para outros Websites.
  3. Memória (2005, p. 107-108), define algumas orientações para o uso de Migalhas de pão:   “ Não utilizá-los em sites simples”, pois são mais bem utilizados em sites com grande complexidade, já que sites menores a tarefa de voltar à determinada página é mais simples ; “ Colocá-los na parte superior da tela, abaixo da marca da empresa”; “ Utilizar algum sinal que demonstre continuidade entre os itens”, caracteres ou imagens que demonstram o fluxo da informação, auxiliam no entendimento do usuário. Ex: “ > ”,” -> ”, “ » ” ; “ Utilizar tipografia em corpo pequeno” , as migalhas não devem ocupar espaço muito grande, e como trata-se de navegação auxiliar deve ser discreta; “ Não utilizar o último item como título da página” , não descartar o titulo da página e o último item deve ser sem link; “ Utilizar duas linhas quando necessário” , em um Website muito grande pode acontecer de o elemento ter que ocupar mais de uma linha, o autor diz que “é melhor mostrar todo o conteúdo do que escondê-lo por razões estéticas”.